Что такое AbortController и как он используется в JavaScript для отмены асинхронных операций?

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

Короткий ответ

AbortController — это встроенный объект в JavaScript, который позволяет отменять асинхронные операции, такие как запросы через fetch. Он работает вместе с AbortSignal, который передаётся в асинхронную операцию. Если вы вызываете метод abort() у контроллера, операция прерывается, и её результат больше не будет обработан.

Длинный ответ

AbortController и AbortSignal были введены для удобного управления асинхронными процессами в JavaScript. 

 

AbortController создаёт сигнал, который можно передать в такие функции, как fetch. Этот сигнал позволяет остановить выполнение запроса, когда он больше не нужен, например, если пользователь перешёл на другую страницу или операция слишком долго выполняется.

 

Пример использования:

const controller = new AbortController(); 

const signal = controller.signal; 

fetch('https://api.example.com/data', { signal })  
   .then(response => response.json())  
   .then(data => console.log(data))  
   .catch(err => {
       if (err.name === 'AbortError') {   
          console.log('Fetch aborted!');    
       } else {   
          console.error('Fetch error:', err);    
       }  
    }); // Отменим запрос через 3 секунды 
    
 setTimeout(() => {  controller.abort(); }, 3000);

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

Уровень

  • Рейтинг:

    5

  • Сложность:

    8

Навыки

  • JavaScript

    JavaScript

Ключевые слова

Подпишись на React Developer в телеграм