Как правильно использовать интерцепторы в axios?
Здравствуйте, хотел узнать у более опытных коллег как правильно использовать interceptors как при запросе так и при ответе. Можно ли управлять роутингом при запросах?
Средний 1 комментарий
Покажу немного практик, как интерцепторы упрощают жизнь мне, да и многим, в целом.
Здесь и далее покажу именно использование интерцепторов при работе с авторизацией по JWT (токены).
1) Подстановка хедера авторизации
Здесь мы проверям наличие доступа из стора, а точнее, наличие токена. Далее, подставляем, либо удаляем заголовок.
2) Следующая практика, это обновление токена (то, о чем вы спросили в комментарии, при окончании сессии и т.д.)
Здесь мы можем видеть, что при каждом ответе проверяем наличие ошибок и если ошибка соответствует ошибке с токеном, то отправляем обновлять токен и далее снова отправляем тот же самый запрос, который к нам вернулся с ошибкой. Тут грамотно будет проверять не само сообщение об ошибке, а код ответа (401 и т.д.), но тут используется такое решение уже из за специфики бэка.
В этом же решение, вместо обновления токена, можно отправлять юзера авторизовываться самому, на страницу авторизации. Для этого, конечно же, стоит передавать не экземпляр store, а экземляр роутера, чтобы редиректить юзера. Надеюсь, помог и хоть как то наглядно показал способы применения 🙂
Axios или Fetch: чем пользоваться в 2019 году?
Axios — это широко известная JavaScript-библиотека. Она представляет собой HTTP-клиент, основанный на промисах и предназначенный для браузеров и для Node.js. Если вы работали в последние несколько лет JavaScript-программистом, то вы, совершенно определённо, этой библиотекой пользовались. В октябре 2019 года пакет Axios был загружен из npm 25 миллионов раз. Кажется, что будущее Axios безоблачно. Но что если я скажу вам, что Axios — это мёртвый проект. Именно этому было посвящено одно обсуждение на Reddit. А именно, речь идёт о следующем:
Когда библиотека Axios стала популярной, в браузерах не было API, реализующего HTTP-клиент, основанный на промисах. Стандартный интерфейс XML HTTP Request (XHR) был неудобным, работать с ним было тяжело. Разработчики с радостью приняли Axios из-за того, что эта библиотека облегчала им жизнь.
В 2015 вышел API Fetch. Почему же мы, в 2019 году, до сих пор используем Axios? Давайте сравним эти две технологии.
Объём шаблонного кода
▍Fetch
▍Axios
При использовании Fetch приходится иметь дело с двумя промисами. А вот при работе с Axios у нас есть прямой доступ к JSON-результату в свойстве data объекта ответа.
Метод json() миксина Body принимает поток Response и полностью читает его. Он возвращает промис, который разрешается JSON-результатом разбора текста тела запроса.
Ещё больше шаблонного кода в Fetch приходится использовать при работе с POST-запросами.
▍Fetch
▍Axios
Использование Axios позволяет избежать написания больших объёмов шаблонного кода и сделать код чище и понятнее.
Обработка ошибок
▍Fetch
▍Axios
Отсутствующие возможности
Axios умеет следить за ходом выгрузки данных. Fetch это не поддерживает. Это может стать решающим фактором выбора технологии для тех, кто разрабатывает приложение, позволяющее пользователям выгружать на сервер фотографии или видеофайлы.
Альтернативные библиотеки
Вот пара альтернатив Axios и API Fetch:
Итоги
Чем стоит пользоваться в 2019 году? Это зависит от многого. Например, если вам нужно отслеживать прогресс выгрузки материалов на сервер, то вам лучше всего подойдёт Axios или Superagent. Если вы можете справиться с ограничениями Fetch — тогда вам лучше воспользоваться именно этим API. А для того, чтобы немного улучшить Fetch-код, попробуйте библиотеку-обёртку наподобие Ky.
Уважаемые читатели! Какими HTTP-клиентами вы пользуетесь в своих проектах?
Как вы можете использовать Axios Interceptors?
Я видел документацию Axios, но все, что он говорит, это
Также во многих руководствах показан только этот код, но я не совсем понимаю, для чего он используется, может кто-нибудь дать мне простой пример для подражания.
5 ответов
Говоря простыми словами, это больше контрольная точка для каждого действия http. Каждый вызов API, который был сделан, проходит через этот перехватчик.
Итак, почему два перехватчика?
Вызов API состоит из двух половин: запроса и ответа. Поскольку он ведет себя как контрольная точка, запрос и ответ имеют отдельные перехватчики.
Предположим, что вы хотите проверить перед тем, как сделать запрос, действительны ли ваши учетные данные? Таким образом, вместо того, чтобы фактически сделать вызов API, вы можете проверить его на уровне перехватчика, которые являются действительными вашими учетными данными.
Предположим, вам нужно прикрепить токен к каждому выполненному запросу, вместо дублирования логики добавления токена при каждом вызове axios, вы можете создать перехватчик, который прикрепляет токен к каждому выполненному запросу.
Предположим, вы получили ответ и, судя по API-ответам, которые вы хотите определить, что пользователь вошел в систему. Таким образом, в перехватчике ответов вы можете инициализировать класс, который обрабатывает пользователя, вошедшего в систему, и обновлять его соответствующим образом для объекта ответа, который вы используете. получено.
Предположим, вы запросили некоторые API с действительными учетными данными API, но у вас нет действительной роли для доступа к данным. Таким образом, вы можете вызвать предупреждение от перехватчика ответа о том, что пользователь не разрешен. Таким образом вы будете защищены от неавторизованной обработки ошибок API, которую вам придется выполнять при каждом запросе Axios, который вы сделали.
Могли бы придумать эти варианты использования прямо сейчас.
Как использовать Axios в React
В этой статье вы узнаете как использовать библиотеку Axios в React.
Рассмотрим все на примере запросов на сервер, отобразим полученные данные в таблице, сдалаем компонент проверки загрузки и все это используя React Hooks.
Что такое Axios?
Axios это один из самых популярных HTTP клиентов для браузеров и node.js, основанный на промисах.
В Axios есть поддержка запросов, получение ответов от сервера, их трансформация и автоматическая конвертация в JSON.
Перед тем как начать, создадим новый React проект:
Данные для проекта
В качестве данных для нашего проекта будем использовать массив объектов:
Настройка компонента для работы с Axios
Загружаем библиотеку Axios:
Импортируем axios в компонент из которого будем отправлять запросы на сервер:
Т.к. в проекте мы используем React Hooks, импортируем useState и useEffect (подробнее про хуки в реакте читаем по ссылке):
Далее в компонент добавляем следующий код:
Рассмотрим код поближе:
Отвечает за состояние стейта в компоненте:
useEffect будет следить за изменением setAppState и производить ререндер если это необходимо
сюда подставляем нашу ссылку
отправляем get запрос на сервер, затем полученные JSON данные сохраняем в стейт
Компонент проверки загрузки
В src создадим папку components. В ней создаем компонент UserData.js и добавляем следующий код:
В пропсы компонента мы будем передавать данные полученные с сервера
делаем проверку, есть ли данные с сервера
Методом map проходим по массиву с людьми, для каждого человека создаем строку. Не забываем про key.
В папке components создаем LoadingPersonsData.js и вставляем следующий код:
Код выше это higher-order component в React. В качестве пропсов он принимает другой компонент и затем возвращает какую-либо логику. В нашем случае компонент проверяет isLoading. Пока данные загружаются, мы отображаем сообщение о загрузке, как только isLoading станет false мы возвращаем компонент с данными.
Внесем изменения в наш App.js для возможности проверки загрузки данных.
Импортируем наши компоненты в App.js:
Добавляем следующий код:
Мы создаем новый компонент, приравниваем его к нашему higher-order компоненту и обворачиваем им UserData (компонент отображения данных).
В стейт мы добавляем новое свойство loading: false, по нему мы будем определять загрузку данных с сервера.
Рендерим компонент и передаем пропсы в наш higher-order компонент.
Добавим немного css и при загрузки данных увидим следующее окно:
А теперь, когда get запрос на сервер завершен успешно, данные получены:
Теперь мы знаем как использовать Axios get с REST API.
Если у вас есть вопросы или пожелания, оставляйте их в комментариях. Буду рад ответить.
Почему axios.interceptor при перехвате запроса отправляет актуальные данные, а так-же все прошлые данные?
Здравствуйте.
Есть интерцептор, который консолит каждый раз при запросе на любой адрес текущий токен с хранилища:
А так-же есть кнопка логина, при нажатии, в результате которого приходит с сервера токен и отправляется в хранилище:
Проблема в том, что при нажатии на кнопку логин отправляется судя по всему новый и старые запросы все, видно из консоли.(смотрите скрин консоли, после множества нажатий).
https://disk.yandex.by/i/CBriL23gA22DYQ
Перепробовал все варианты, так происходит только при использовании интерцептора, если эту же логику оставляю без его использования, а подвесив именно на запрос по нужному адресу, то все работает корректно. Надеюсь что все понятно, спасибо.
Interceptor надо вешать, очевидно, один раз одну штуку.
AndreiAntanovich, интерцептор надо задавать вообще вне компонента ровно один раз. Интерцептор слушает все запросы сделанные данным инстансом axios независимо от компонента.
Токен в нём стоит получать не из каких-то непонятных локальных props.
Eсли очень хочется, можно сделать как-то так:
Вне компонента, сверху:
