Axios от А до Я. Полный курс в React приложении. Axios + TS

• Axios - популярная библиотека для запросов на бэкенд.  

• Используется для удобства и гибкости в реальных проектах.  

• Позволяет настраивать хедеры, передавать токены и обрабатывать ошибки.  

• Установка Axios в проект с флагом typeScript.  

• Использование npm или yarn для установки.  

• Axios написан на TypeScript, поэтому не требует дополнительных типов.  

• Создание простого запроса для получения данных.  

• Axios возвращает Promise, который можно использовать в стиле Promises или Async/Await.  

• Пример использования Axios для получения постов.  

• Указание метода запроса и параметров.  

• Пример использования параметров offset и limit.  

• Axios автоматически добавляет параметры в URL.  

• Axios возвращает объект с подробной информацией о запросе.  

• Возможность настройки обработки ошибок с помощью параметра validateStatus.  

• Пример обработки ошибки 404.  

• Переход от Promises к Async/Await стилю.  

• Проверка типа ошибки и обработка ответа.  

• Пример использования утилиты для проверки типа ошибки.  

• Настройка метода запроса и базового URL.  

• Возможность трансформации ответа перед отправкой.  

• Пример установки заголовков и параметров.  

• Настройка тайм-аута для запроса.  

• Проверка наличия ответа и обработка ошибок.  

• Использование куки, установленных бэкендом, через настройку cookies.  

• Используется для облегчения тестирования и возвращает промес.  

• Не рекомендуется использовать, лучше самостоятельно добавлять авторизацию в хедера.  

• Настройки для защиты от кросс-сайтовых атак и использования куки.  

• Используется для отображения прогресса загрузки данных.  

• При GET запросах показывает текущий прогресс, при POST запросах - общий прогресс.  

• Можно использовать для заполнения прогресс-бара.  

• Позволяет проксировать запросы на другой хост.  

• Можно автоматически подставлять токен аутентификации.  

• Настройка декомпрессии для уменьшения размера ответа.  

• Позволяет конкретизировать запросы, передавая метод и URL.  

• Можно использовать дефолтные настройки для всех запросов.  

• Возможность создания нескольких инстансов axios для разных API.  

• Обработка ошибок должна быть в отдельном слое.  

• Настройки кросс-сайтового скриптинга CORS для защиты от атак.  

• Возможность подстановки авторизации для разных API.  

• Интерцепторы - это промежуточный слой, который срабатывает перед выполнением запроса или ответа.  

• Можно установить интерцепторы на запрос и ответ.  

• Интерцепторы могут обрабатывать ошибки и успешное выполнение.  

• Интерцепторы позволяют логировать статус ответа и обрабатывать ошибки.  

• Пример: обработка ошибки 401 "неавторизован" с помощью токена обновления сессии.  

• Интерцепторы помогают избежать дублирования кода для обработки ошибок.  

• Интерцепторы на запрос срабатывают перед отправкой запроса на бэкенд.  

• Можно использовать для подсчета времени выполнения запроса и установки заголовков.  

• Пример: установка авторизационного токена перед запросом.  

• Axios предоставляет возможность отмены запроса через токен или abort-контроллер.  

• Пример: создание abort-контроллера и отмена запроса.  

• Полезно для больших запросов, которые пользователь может отменить.  

• Axios поддерживает работу с формами для загрузки файлов.  

• Пример: создание формы и загрузка файла через Axios POST или PUT.  

• Это удобно для загрузки файлов на бэкенд.  

• Axios позволяет типизировать возвращаемые значения и параметры запросов.  

• Пример: типизация ответа с помощью дженериков.  

• Важно правильно типизировать параметры для корректной работы.  

• Основные возможности Axios в TypeScript.  

• Видео охватывает базовые кейсы и помогает понять интерцепторы и инстанции.  

• Подписывайтесь на телеграм-канал для обсуждений и поддержки канала.