Що таке AbortController?

AbortController - це контролер, який дозволяє скасувати одну або кілька асинхронних операцій, якщо ці операції підтримують AbortSignal. Він створює об’єкт signal, який ви передаєте в операцію, а потім у потрібний момент викликаєте controller.abort() і операція отримує сигнал, щоб зупинитися.

Найкращий спосіб розібратися - це глянути на приклад з fetch. Уявимо, що в нас є React-додаток і на одній сторінці є запит, який може довго виконуватися, і якщо користувач покине сторінку, запит все одно виконається і поламає UI.

Це стандартна проблема в React, коли оновлення стану відбувається після смерті компонента, і AbortController чудово її вирішує. В прикладі нижче ми створюємо контролер і передаємо його в fetch. Таким чином, ми встановлюємо контроль над процесом виконання і можемо скасувати його в потрібний нам момент.

Якщо користувач покинув сторінку і компонент був видалений з DOM, нам нема ніякого сенсу продовжувати виконання HTTP-запиту, і ми його скасовуємо через controller.abort() перед тим, як компонент буде видалений з дерева.

useEffect(() => {

const controller = new AbortController();

(async () => {

const res = await fetch(`/api/users/${id}`, { signal: controller.signal });

setUser(await res.json());

})();

return () => controller.abort();

}, [id]);

Якщо ви хочете детальніше ознайомитися з усіма можливостями AbortController, найкращий спосіб - почитати документацію.

До AbortController було інше запитання в цій темі. Звучало воно так: Чи можна скасувати Promise?

Найчастіше його задавали на Angular-інтервʼю і очікували, що розробник розуміє неможливість скасування Promise і необхідність використання Observable для контролю над процесом виконання.

Коментарі (0)