JavaScript AbortController.abort() — скасувати запит чи обробники

Метод abort() скасовує все, що слухає сигнал цього контролера.

правити

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

Одна дія — багато наслідків: обірветься fetch, знімуться обробники подій, навішані з цим сигналом, зупиниться все, що вміє його слухати.

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

Контролер одноразовий: після abort() його сигнал назавжди лишається скасованим. Для наступного запиту потрібен новий контролер.

Аргументом можна передати причину — вона прилетить у signal.reason.

правити

Нотатка

Контролер не перевикористовується. Після abort() кожен новий fetch із тим самим сигналом упаде миттєво, ще не вийшовши в мережу.

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

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

Переглядачі

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

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

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

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

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

Приклади

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

<div id="demo-input">Демонстраційний елемент</div>

const input = document.getElementById('demo-input');

let controller;

input.addEventListener('input', async () => {
    controller?.abort();

    // ЩОРАЗУ новий — старий уже мертвий
    controller = new AbortController();

    try {
        const response = await fetch('/search?q=' + input.value, {
            signal: controller.signal,
        });

        show(await response.json());
    } catch (error) {
        // скасування — не збій
        if (error.name !== 'AbortError') {
            throw error;
        }
    }
});