Настройка перехватчиков Axios для всех HTTP-вызовов в приложении

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

По мере того, как Интернет становится более зрелым и сложным, сбор данных для выполнения этих сложных задач также становится более сложным.

Подумайте об этом: с появлением Интернета вы могли отправлять и получать электронную почту, искать информацию по ключевым словам и посещать несколько очень простых веб-сайтов. Сегодня вы можете: заказать автомобиль, и он заберет вас в том месте, где вы находитесь, в течение нескольких минут, совершать покупки с помощью номера кредитной карты, хранящегося в вашем телефоне, искать чрезвычайно конкретные вопросы с помощью голоса и получать тысячи полезных и актуальных ответов. Удивительно, что теперь у нас под рукой, с минимальными усилиями с нашей стороны.

По мере того как Интернет становится все более полезным для нас как пользователей, нам, разработчикам, становится все сложнее получать все данные, необходимые для того, чтобы быть настолько полезными, и именно с этого начинается моя сегодняшняя история.

Как инженер-программист, подавляющее большинство данных, с которыми я работаю, живет где-то помимо моего приложения и баз данных, за которые отвечает моя команда. Поэтому я трачу много времени на запрос данных, получение данных, проверку данных, изменение формы данных - и все это через HTTP-вызовы приложений помимо моего собственного.

Часто эти HTTP-вызовы тоже не так просты: я не могу просто отправить GET или POST и ожидать ответа 200. Для этих HTTP-вызовов требуются файлы cookie, токены авторизации, защищенные заголовки, JWT, ключи API или другие методы проверки - команды, у которых я запрашиваю эти данные, должны знать, что моему приложению разрешено взаимодействовать с информацией, за которую они несут ответственность.

И это совершенно нормально и нормально в наши дни; системам необходимо подтвердить, что им разрешено просматривать или изменять данные. Он не может быть доступен только для тех, кто подключен к Интернету и знает URL-адрес их службы, это может быть очень опасно.

Но хотя это нормально, обеспечение того, чтобы каждый отдельный HTTP-запрос или ответ содержал всю информацию, необходимую для прохождения проверки, может быть чрезвычайно повторяющимся для настройки (и легко забыть добавить). Но этого не должно быть. С помощью популярного HTTP-клиента JavaScript Axios вы можете настроить функции перехватчика, чтобы перехватывать каждый HTTP-запрос или ответ и делать все, что должно произойти, даже не задумываясь об этом - что лучше всего. решение.

Напишите код один раз и больше не беспокойтесь об этом. Готовы улучшить свою жизнь программирования?

Совет: Делитесь своими повторно используемыми компонентами между проектами с помощью Bit (Github).

Bit упрощает совместное использование, документирование и повторное использование независимых компонентов в проектах . Используйте его, чтобы максимально увеличить повторное использование кода, сохранить единообразный дизайн, сотрудничать в команде, ускорить доставку и создавать масштабируемые приложения.

Bit поддерживает Node, TypeScript, React, Vue, Angular и другие.

Знакомьтесь, Axios

Если вы не знакомы с ним, Axios - чрезвычайно популярный HTTP-клиент на основе обещаний для JavaScript в браузере и Node.js на сервере.

В дополнение ко всей базовой функциональности CRUD (создание, чтение, обновление, удаление), которую вы ожидаете от любого HTTP-клиента, Axios из коробки предлагает множество других полезных функций, таких как: настройки по умолчанию, обработка ошибок, автоматическая отмена запроса. сериализацию объектов JavaScript в JSON и многое другое, но сегодня я хочу сосредоточиться на перехватчиках Axios.

Перехватчики Axios

Перехватчики - это функция, которая позволяет приложению перехватывать запросы или ответы до того, как они будут обработаны .then() или .catch().

Вы спросите, почему это полезно? Что ж, как я упоминал выше, предположим, что каждый HTTP-запрос требует присоединенного к нему свойства header, чтобы проверить, что приложению, запрашивающему данные, разрешен доступ к этим данным. Или предположим, что иногда ответ HTTP, который возвращается, является плохим ответом - статус 400 или 500. В таких случаях вы можете захотеть автоматически повторить запрос или проверить, что авторизация, которая была отклонена, действительно все еще действительна.

Axios упрощает настройку перехватчиков, и, судя по моему личному опыту, не имеет особого значения, где в файлах проекта они расположены, просто кажется, что они работают. Давайте рассмотрим несколько примеров каждого типа перехватчиков.

Перехват запросов

Первый пример кода, который я покажу, - это настройка перехватчика запросов Axios. Пример написан внутри приложения React, но я ожидаю, что процесс будет аналогичным независимо от того, какой JavaScript фреймворк (или нет) вы используете.

Оба типа перехватчиков Axios выполняют две функции. Первая функция перехватчика запросов изменяет запрос, если это действительный, успешный запрос, вторая функция обрабатывает, когда запрос недействителен, и выдает ошибку.

Этот конкретный код находится в корне приложения React в его index.js файле внутри папки src/.

index.js

В приведенном выше примере axios импортируется вверху файла с синтаксисом ES6 import, после чего он готов к использованию. В своем примере я использую стрелочные функции ES6, но они переводятся на базовый JavaScript как:

axios.interceptors.request.use(
  function(successfulReq) {
    ...modify code; return successfulReq;
  }, 
  function(error) {
    ...return Promise.reject(error);
  }
);

Затем сделайте все, что нужно сделать с request, прежде чем исходящий HTTP-запрос будет отправлен со стороны сервера приложения.

Назначение этого конкретного перехватчика: всякий раз, когда приложение делает HTTP-запрос к одной из поддерживающих служб, URL-адреса которых включают checkout, billing или order, Axios автоматически присоединяет header к запросу с username, хранящимся в состоянии. В моем случае Redux хранит информацию о пользователе в состоянии, но ее можно хранить в локальном хранилище, в хранилище сеансов - везде, где это имеет смысл.

Если HTTP-запрос не собирается перейти к одной из этих служб, перехватчик ничего не делает для изменения запроса и позволяет ему продолжать свой путь без изменений.

И если запрос каким-то образом искажен, вторая функция, функция error(), сработает и выдаст ошибку, отклоняя запрос и объясняя причину.

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

Перехват ответов

У меня есть два примера перехватчиков ответов, которые я хочу вам показать, потому что оба информативны и оба происходят в разных частях приложения: один на стороне клиента в браузере (например, пример перехватчика запросов ), а второй - на стороне сервера - на стороне Node.js.

Как и перехватчики запросов, перехватчики ответов принимают два аргумента функции: первая функция - когда возвращается ответ HTTP со статусом 200, вторая функция - когда это код состояния, выходящий за пределы диапазона 200. Это станет более понятным, если я рассмотрю приведенные ниже примеры.

Пример на стороне клиента

Первый пример снова находится недалеко от корня моего приложения React, однако он находится не в том же файле, что и перехватчик запросов, он находится в файле App.js в папке src/.

App.js

Поскольку это находится в React-части приложения, библиотека Axios импортируется вверху файла: import axios from 'axios';, а затем вызывается перехватчик запроса с

axios.interceptors.response.use(
  function(successRes) {
    ... modify response; 
    return successRes;
  }, 
  function(error) {
    ... return Promise.reject(error);
  }
);

Мой конкретный пример - это только в том случае, если HTTP-ответ возвращается от службы с 401 unauthorized error, поэтому первый аргумент, переданный перехватчику ответа, равен undefined. Если ответ представляет собой ответ типа 200, перехватчик Axios не беспокоится об этом.

Однако, если ответ HTTP - 401, моя вторая функция (функция axiosRetryInterceptor()) запускается и проверяет, действительны ли учетные данные вошедшего в систему пользователя, поскольку 401 указывает, что токен авторизации пользователя, cookie или сеанс истек. Если сеанс пользователя действительно истек, тогда функция isUserValid() завершит выход пользователя из приложения и потребует от него снова войти в систему, если нет, isUserValid() вернет, что не является причиной 401, и пользователь может продолжить их сеанс.

Итак, это один из примеров перехватчика ответов Axios на стороне клиента, теперь давайте посмотрим на один на стороне сервера.

Пример на стороне сервера

Второй перехватчик ответа происходит на стороне сервера моего приложения и использует стиль импорта CommonJS:

const axios = require('axios');

После создания экземпляра с использованием синтаксиса require фактический перехватчик используется почти так же, как и в браузере. Вот перехватчик ответа, который находится рядом с корнем сервера Node.js в папке server/.

server.js

Этот конкретный перехватчик ответа выполняет две функции. Первая анонимная функция регистрирует, какой метод был вызван (GET, POST и т. Д.), Какой микросервис был вызван (checkout, orders и т. Д.) И какой статус успешного ответа был выдан (200, 204 и т. Д.).

Вторая функция, axiosRetryInterceptor(), вызывается, когда получен статус HTTP, отличный от 200. Если получен статус 400 или 500, эта функция повторит исходный запрос в надежде получить какой-то ответ 200. Он будет повторять до трех попыток и каждый раз будет увеличивать время между запросами к службе, которая отвечает с ошибкой.

Это немного запутано из-за переменной backoff, которая задерживает следующую попытку вызова сервера, но, по сути, это все, что на самом деле делает этот перехватчик ответа.

И вот, вкратце, о перехватчиках запросов и ответов Axios. Неплохо для реализации и довольно удобно, не правда ли?

Заключение

Интернет сегодня сложен, и становится все больше. Но, к счастью для нас, веб-разработчиков, есть несколько отличных пакетов JavaScript, которые справятся с некоторыми сложностями.

Сложность, на которой я обращаю внимание сегодня, вызвана множеством других сервисов, владеющих данными, которые нужны нашим приложениям. Часто нашим приложениям необходимо отправить какое-то доказательство того, что они имеют право доступа к данным, имеющимся у этих сервисов, или им нужно знать, что делать, если другие сервисы отклоняют их запрос, и именно здесь перехватчики Axios пригодятся.

Эти маленькие функции будут автоматически перехватывать каждый исходящий HTTP-запрос или входящий HTTP-ответ, и если запрос или ответ соответствуют параметрам, установленным перехватчиком, он изменит эти полезные данные, как сочтут разработчики. Нужно отправлять заголовки аутентификации с каждым запросом? Выполнено. Нужно повторить запрос, если служба отправляет ответ 500? Без проблем. Перехватчики Axios были созданы именно для этих сценариев.

Повторите попытку через несколько недель - я напишу больше о JavaScript, React, ES6 или чем-то еще, связанном с веб-разработкой.

Спасибо за прочтение. Я надеюсь, что вы попробуете эти перехватчики в своем собственном коде - зачем беспокоиться о том, чтобы не забывать самостоятельно формировать все свои полезные данные или ответы, если вы можете позволить Axios протянуть вам руку помощи?