JavaScript AbortController — скасування запиту fetch

AbortController дозволяє скасувати запит fetch, обробник події чи будь-яку операцію, яка вміє слухати сигнал скасування.

правити

Загальний опис

Довгий час запит, який пішов у мережу, скасувати було неможливо: користувач уже пішов з іншої сторінки, а відповідь усе одно приїжджала й перезаписувала свіжі дані.

Контролер видає сигнал (controller.signal), який передається в fetch. Виклик controller.abort() обриває запит, і той падає з помилкою на ім'я AbortError.

Класичний випадок — пошук із підказками: кожне нове натискання клавіші має обірвати попередній, ще не завершений запит. Інакше відповіді приходять урозбивку й перемагає та, що приїхала останньою, а не та, що відповідає останньому запиту.

правити

Порада

Той самий сигнал можна віддати в addEventListener({ signal }) — і один abort() зніме всі обробники відразу. Це найкоротший спосіб прибрати за собою.

автор: NagarD правити

Нотатка

Скасований запит кидає помилку. AbortError — це не збій, а очікуваний результат, тож у catch його варто відрізняти від справжніх помилок мережі.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const controller = new AbortController();\nfetch(url, { signal: controller.signal });

властивості

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
AbortController	66+	57+	12.1+	53+	16+	-

Підтримка: мобільні переглядачі

Переглядач
AbortController	66+	yes	yes	12.2+

Приклади

+ запропонувати свій приклад у пісочниці

<input id="search" type="search" placeholder="Пошук…">

const input = document.getElementById('search');

let controller;

input.addEventListener('input', async () => {
    // обриваємо попередній, ще не завершений запит
    controller?.abort();
    controller = new AbortController();

    try {
        const response = await fetch('/search?q=' + input.value, {
            signal: controller.signal,
        });
        console.log('Результати:', await response.json());
    } catch (error) {
        // скасування — не збій, мовчимо
        if (error.name !== 'AbortError') {
            console.log('Запит не пройшов:', error.message);
        }
    }
});

// запит із таймаутом у 5 секунд
fetch('/api/slow', { signal: AbortSignal.timeout(5000) })
    .catch(error => console.log('slow-запит:', error.name));