Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить AbortController?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що робить 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);
```

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

1. Створюємо контролер -> `controller.signal` передаємо у `fetch`.
2. Коли викликаємо `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)` | слухає подію скасування |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати436 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.