Что такое перехватчики Axios и сценарии использования

Axios — популярный HTTP-клиент, используемый в средах JavaScript. Он может работать как в браузерах, так и в Node.js. Одной из самых мощных функций, предоставляемых Axios, являются настраиваемые операции, называемые «перехватчиками». В этой статье мы рассмотрим, что такое перехватчики и как их можно использовать на практических примерах.

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

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

Некоторые сценарии использования:

1.Глобальное управление ошибками API: может использоваться для централизованного управления ошибками, возвращаемыми с сервера.

axios.interceptors.response.use(
  function (response) {
    // Handle successful responses
    return response;
  },
  function (error) {
    // Handle server error codes and display warning messages
    if (error.response.status === 401) {
      alert("Your session has expired. Please log in again.");
    } else if (error.response.status === 403) {
      alert("You do not have the authority to perform this action.");
    } else if (error.response.status === 404) {
      alert("The requested resource could not be found.");
    } else {
      alert("An unexpected error occurred. Please try again later.");
    }
    return Promise.reject(error);
  }
);

2. Измерение времени запросов и ответов. Может использоваться для измерения времени запросов и ответов API и отслеживания производительности.

// Measure request time
axios.interceptors.request.use(function (config) {
  config.metadata = { startTime: new Date() };
  return config;
});

// Measure response time
axios.interceptors.response.use(function (response) {
  response.config.metadata.endTime = new Date();
  response.duration = response.config.metadata.endTime - response.config.metadata.startTime;
  console.log(`Request for ${response.config.url} took ${response.duration} ms.`);
  return response;
});

3. Автоматические повторы: может использоваться для автоматического повторения запросов в случае ошибок сетевого подключения и временных проблем с сервером.

const axios = require("axios");
const axiosRetry = require("axios-retry");

// Automatically retry requests
axiosRetry(axios, {
  retries: 3, // Retry requests 3 times
  retryDelay: (retryCount) => {
    return retryCount * 1000; // Apply increasing delays between retries
  },
  retryCondition: (error) => {
    // Retry on network errors or 5xx server errors
    return axiosRetry.isNetworkError(error) || error.response.status >= 500;
  },
});

// Example request
axios.get("https://api.example.com/data")
  .then(response => console.log(response.data))
  .catch(error => console.error("Request failed:", error));

4. Регистрация запросов и ответов. Регистрируя все запросы и ответы API, вы можете создать запись для отслеживания производительности и ошибок вашего приложения.

// Log requests
axios.interceptors.request.use(function (config) {
  console.log(`Request: ${config.method.toUpperCase()} ${config.url}`);
  return config;
});

// Log responses
axios.interceptors.response.use(
  function (response) {
    console.log(`Response: ${response.status} ${response.config.url}`);
    return response;
  },
  function (error) {
    console.log(`Error: ${error.response.status} ${error.config.url}`);
    return Promise.reject(error);
  }
);

// Example request
axios.get("https://api.example.com/data")
  .then(response => console.log(response.data))
  .catch(error => console.error("Request failed:", error));

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

Заключение:

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