Как отменить fetch запрос?

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

Первым шагом для реализации отмены запроса является создание экземпляра этого класса. Вы объявляете константу, например, const controller = new AbortController(). Этот объект управляет процессом отмены и содержит в себе специальный сигнал.

Вторым шагом этот сигнал передается в параметры функции fetch. Вы вызываете fetch(url, { signal: controller.signal }), связывая таким образом сетевой запрос с созданным контроллером. Теперь браузер знает, что этот запрос находится под управлением данного контроллера.

Когда возникает необходимость отменить операцию, например, при уничтожении компонента React или запуске нового поискового запроса, вы вызываете метод controller.abort(). Это действие мгновенно прерывает выполнение сетевого запроса на уровне браузера.

Важным аспектом является обработка этого события в коде. При отмене запроса fetch выбрасывает исключение типа DOMException с именем AbortError. Чтобы приложение не падало с необработанной ошибкой, код следует обернуть в конструкцию try/catch или использовать цепочку промисов .catch(), где обязательно нужно проверять тип ошибки. Если ошибка является экземпляром DOMException и ее имя равно AbortError, вы можете просто проигнорировать ее, так как отмена была запланированной. Такой подход позволяет существенно экономить трафик пользователя и повышать общую отзывчивость интерфейса.