Що робить AbortController?

JavaScriptJunior~1 хв читання

Що робить AbortController

AbortController - це спеціальний об'єкт, який дозволяє створити "сигнал скасування" (AbortSignal) і надіслати команду "скасувати" асинхронним операціям, які його слухають.

Простіше кажучи:

AbortController керує станом "скасовано чи ні", а AbortSignal - це "прапорець", який асинхронний код може відстежувати.

Приклад простого використання з fetch

javascript

const controller = new AbortController(); // створюємо контролер
const signal = controller.signal;          // отримуємо сигнал з нього

fetch('https://example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запит було скасовано');
    } else {
      console.error('Помилка:', err);
    }
  });

// Скасуємо запит через 1 секунду:
setTimeout(() => {
  controller.abort(); // скасування
}, 1000);

Що відбувається:

Створюємо контролер -> controller.signal передаємо у fetch.
Коли викликаємо controller.abort(),

fetch миттєво переривається,
викидається помилка AbortError.

Як це працює під капотом

AbortController створює об'єкт з двома ключовими властивостями:

signal - об'єкт AbortSignal, який можна передати в асинхронну операцію.
abort() - метод, який активує цей сигнал (змінює його стан і викликає всі обробники).

Що робить AbortSignal

AbortSignal:

Має властивість .aborted (булеве значення: true, якщо операцію скасовано);
Може слухати подію "abort":

javascript

const controller = new AbortController();
const signal = controller.signal;

signal.addEventListener('abort', () => {
  console.log('Операцію скасовано!');
});

controller.abort(); // => "Операцію скасовано!"

Де можна використовувати

AbortController підтримується у багатьох API:

API	Підтримує скасування?
`fetch()`	Так
`ReadableStream`, `WritableStream`	Так
`WebSocket` (через користувацьку обгортку)	Частково
`setTimeout` / `setInterval` (через AbortSignal API в Node 20+ або browser polyfill)	Так
`navigator.sendBeacon()` (у деяких браузерах)	Частково
Власні async функції	Так (якщо реалізуєш підтримку вручну)

Приклад з Promise і кастомним скасуванням

Можна використовувати сигнал у своїх асинхронних функціях:

javascript

function wait(ms, signal) {
  return new Promise((resolve, reject) => {
    const timeout = setTimeout(resolve, ms);

    signal.addEventListener('abort', () => {
      clearTimeout(timeout);
      reject(new Error('Скасовано користувачем'));
    });
  });
}

const controller = new AbortController();
wait(5000, controller.signal)
  .then(() => console.log('Минуло 5 секунд'))
  .catch(err => console.log(err.message));

setTimeout(() => controller.abort(), 2000); // скасовуємо через 2 сек

Результат:

javascript

Скасовано користувачем

Повторне використання

Контролер одноразовий:

Після controller.abort() його signal назавжди стає .aborted = true.
Щоб знову використати, потрібно створити новий AbortController.

Підсумок

Властивість / метод	Що робить
`new AbortController()`	створює контролер
`.signal`	сигнал для передавання в async API
`.abort()`	надсилає сигнал "скасувати"
`signal.aborted`	`true`, якщо скасовано
`signal.addEventListener('abort', fn)`	слухає подію скасування

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.