QUESTION: Як скасувати fetch запит?

Сучасні веб-додатки часто стикаються з необхідністю скасування мережевих запитів, які стали неактуальними. Наприклад, користувач вводить текст у рядок пошуку, і для кожного введеного символу надсилається запит на сервер. Попередні запити при цьому втрачають актуальність, але продовжують навантажувати мережу та сервер. Для вирішення цього завдання використовується вбудований у сучасні браузери стандартний механізм AbortController.

Першим кроком для реалізації скасування запиту є створення екземпляра цього класу. Ви оголошуєте константу, наприклад, const controller = new AbortController(). Цей об'єкт керує процесом скасування і містить у собі спеціальний сигнал.

Другим кроком цей сигнал передається в параметри функції fetch. Ви викликаєте fetch(url, { signal: controller.signal }), пов'язуючи таким чином мережевий запит із створеним контролером. Тепер браузер знає, що цей запит перебуває під управлінням даного контролера.

Коли виникає необхідність скасувати операцію, наприклад, при знищенні компонента React або запуску нового пошукового запиту, ви викликаєте метод controller.abort(). Ця дія миттєво перериває виконання мережевого запиту на рівні браузера.

Важливим аспектом є обробка цієї події в коді. При скасуванні запиту fetch викидає виняток типу DOMException з іменем AbortError. Щоб додаток не падав з необробленою помилкою, код слід обернути в конструкцію try/catch або використовувати ланцюжок промісів .catch(), де обов'язково потрібно перевіряти тип помилки. Якщо помилка є екземпляром DOMException і її ім'я дорівнює AbortError, ви можете просто проігнорувати її, оскільки скасування було запланованим. Такий підхід дозволяє суттєво економити трафік користувача та підвищувати загальну чуйність інтерфейсу.