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

Здесь мы обсудим оба сценария.

Запрос API устарел

Шаг 1. Создайте токен отмены

Чтобы включить отмену, вам нужно создать токен отмены с помощью конструктора CancelToken, предоставляемого Axios:

const source = axios.CancelToken.source();

Шаг 2. Отправьте запрос API

Выполните вызов API с помощью Axios и передайте опцию cancelToken с созданным токеном отмены:

axios
  .get('https://<your-api-url-here>', {
    cancelToken: source.token,
  })
  .then((response) => {
    // Process the response data here
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.log('Error:', error.message);
    }
  });

Шаг 3. Отмените запрос

Чтобы отменить текущий запрос API, вызовите функцию cancel для объекта source:

source.cancel('Request canceled due to user action');

При вызове source.cancel() текущий запрос будет прерван, и соответствующий блок catch обработает отмену с условием axios.isCancel(error).

API потребовалось слишком много времени для ответа

Вам просто нужно изменить шаг 2 выше и включить параметр timeout в запрос API.

Шаг 2. Отправьте запрос API с тайм-аутом.

axios
  .get('https://api.example.com/data', {
    cancelToken: source.token,
    timeout: timeoutDuration || 2000, // time in ms
  })
  .then((response) => {
    // Process the response data here
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else if (error.code === 'ECONNABORTED') {  // timeout handling
      console.log('Request timed out');
    } else {
      console.log('Error:', error.message);
    }
  });

Примечание. Вам не нужен шаг 3, если вы просто хотите добавить тайм-аут в свои вызовы API, поскольку вызов API будет автоматически отменен по истечении тайм-аута (только в случае, если API не ответил до этого момента) .

Удачного кодирования!