Управление асинхронными операциями в JavaScript иногда может быть сложной задачей, особенно если вам необходимо отменить или прервать текущие запросы. К счастью, в JavaScript появился встроенный объект AbortController, который значительно упрощает обработку асинхронных операций и их отмену. В этой статье мы рассмотрим различные методы использования объекта AbortController с примерами кода, чтобы продемонстрировать его универсальность и полезность.

Метод 1: базовое использование
Объект AbortController используется вместе с Fetch API, XMLHttpRequest или любой другой асинхронной операцией, поддерживающей интерфейс AbortSignal. Вот простой пример использования Fetch API:

const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => {
    // Process the data
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request aborted');
    } else {
      console.error('An error occurred', error);
    }
  });
// Abort the request after 5 seconds
setTimeout(() => {
  controller.abort();
}, 5000);

Метод 2: объединение с Promise.race()
Вы можете использовать Promise.race()для объединения нескольких обещаний, включая одно, которое разрешается при завершении запроса, и другое, которое отклоняется при прерывании запроса.. Вот пример:

const controller = new AbortController();
const signal = controller.signal;
const fetchData = fetch('https://api.example.com/data', { signal })
  .then(response => response.json());
const abortPromise = new Promise((resolve, reject) => {
  signal.addEventListener('abort', () => {
    reject(new Error('Request aborted'));
  });
});
Promise.race([fetchData, abortPromise])
  .then(data => {
    // Process the data
  })
  .catch(error => {
    console.error('An error occurred', error);
  });
// Abort the request after 5 seconds
setTimeout(() => {
  controller.abort();
}, 5000);

Метод 3. Прерывание нескольких запросов
Вы можете использовать один объект AbortController для одновременного прерывания нескольких запросов. Вот пример:

const controller = new AbortController();
const signal = controller.signal;
const request1 = fetch('https://api.example.com/data1', { signal });
const request2 = fetch('https://api.example.com/data2', { signal });
Promise.all([request1, request2])
  .then(responses => {
    // Process the responses
  })
  .catch(error => {
    console.error('An error occurred', error);
  });
// Abort both requests after 5 seconds
setTimeout(() => {
  controller.abort();
}, 5000);

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

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