JavaScript AbortController.signal — сигнал скасування

Властивість signal — це сигнал скасування, який передають туди, що має вміти скасовуватись.

правити

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

Один сигнал можна віддати скільком завгодно місцям: у fetch, у addEventListener({ signal }), у ResizeObserver. Один виклик abort() вимкне все це разом.

Саме тому це найнадійніший спосіб прибрати за собою: не треба тримати посилання на кожну функцію-обробник, щоб потім її зняти.

У сигналу є aborted (чи вже скасовано) і подія abort — на неї можна підписатись, щоб виконати власне прибирання.

Окремо є AbortSignal.timeout(ms) — готовий сигнал, що скасовується сам за таймаутом.

правити

Порада

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

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

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

Переглядачі

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

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

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

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

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

Приклади

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

class Widget {
    constructor() {
        this.controller = new AbortController();
        const { signal } = this.controller;

        this.onResize = () => console.log('resize');
        this.onScroll = () => console.log('scroll');
        this.onKey = () => console.log('keydown');

        // усі обробники слухають один сигнал
        window.addEventListener('resize', this.onResize, { signal });
        window.addEventListener('scroll', this.onScroll, { signal });
        document.addEventListener('keydown', this.onKey, { signal });
    }

    destroy() {
        // один рядок знімає все
        this.controller.abort();
    }
}

const widget = new Widget();
widget.destroy();
console.log('Обробники знято одним abort()');

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