Что такое перехват HTTP-запросов и как это сделать в JavaScript с помощью Axios

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

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

Вот как вы можете использовать перехватчики Axios для перехвата и изменения запросов:

// Import the Axios library
const axios = require('axios');

// Create an instance of Axios
const instance = axios.create();

// Add a request interceptor
instance.interceptors.request.use(
  function(config) {
    return config;
  },
  function(error) {
    // Handle request error
    return Promise.reject(error);
  }
);

// Make a request using the instance
instance.get('https://api.example.com/data')
  .then(response => {
    // Handle the response
    console.log(response.data);
  })
  .catch(error => {
    // Handle errors
    console.error('Request error:', error);
  });

Изменение запроса

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

const axios = require('axios');

// Create an instance of Axios
const instance = axios.create();

// Add a request interceptor to modify headers
instance.interceptors.request.use(
  function(config) {
    // Add headers to the request config
    config.headers['Authorization'] = 'Bearer your-access-token';
    config.headers['Custom-Header'] = 'custom-value';
    return config;
  },
  function(error) {
    // Handle request error
    return Promise.reject(error);
  }
);

// Make a request using the instance
instance.get('https://api.example.com/data')
  .then(response => {
    // Handle the response
    console.log(response.data);
  })
  .catch(error => {
    // Handle errors
    console.error('Request error:', error);
  });

В этом примере функция instance.interceptors.request.use() добавляет перехватчик запросов к экземпляру Axios. В перехватчике вы можете изменить объект config.headers, чтобы включить любые дополнительные заголовки, которые вам нужны.

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

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

Повторная попытка запроса на основе ответа

Вы можете реализовать механизм повтора с помощью перехватчиков Axios для автоматического повтора запроса, если код ответа равен 401 (неавторизованный). Вот пример того, как этого добиться:

const axios = require('axios');

// Create an instance of Axios
const instance = axios.create();

// Add a response interceptor to handle retries
instance.interceptors.response.use(
  response => {
    // If the response is successful, return it immediately
    return response;
  },
  async error => {
    const originalRequest = error.config;

    // Retry only if the status code is 401 (Unauthorized) and the maximum retry count is not reached
    if (error.response.status === 401 ) {
      // You can implement your own logic here for handling token refreshing or other actions
      return instance(originalRequest);
    }
  }
);

// Make a request using the instance
instance.get('https://api.example.com/data')
  .then(response => {
    // Handle the successful response
    console.log(response.data);
  })
  .catch(error => {
    // Handle errors, including retries
    console.error('Request error:', error);
  });