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

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

• Для работы с асинхронными HTTP-запросами через fetch API
• применяется AbortController, позволяющий отменять операции
• Сначала создаётся контроллер: const controller = new AbortController()
• Затем его сигнал передаётся запросу: fetch(url, { signal: controller.signal })
• Метод controller.abort() останавливает выполняющийся запрос
• После отмены возникает ошибка с именем AbortError
• Так можно контролировать длительность запроса и не расходовать ресурсы без необходимости

Итог: чтобы отменить fetch, используйте AbortController и сигнал abort для управления запросом.

Подробный ответ

Основной ответ

В браузере fetch-запрос прерывается с помощью AbortController. Для этого вызывают метод abort(), который прекращает асинхронную операцию. Сам fetch API не предоставляет отдельного встроенного метода отмены, поэтому AbortController используется как стандартный способ начиная с современных версий браузеров, включая Chrome 66+ и Firefox 57+.

Ключевые моменты

• Сначала создайте экземпляр AbortController, а его signal укажите в опциях запроса как значение fetch(url, { signal: controller.signal }).
• Для прекращения запроса вызовите метод controller.abort(). В результате промис fetch будет отклонён с ошибкой DOMException типа "AbortError".
• Подход особенно полезен при размонтировании компонентов, например в React 18+, а также помогает уменьшить сетевой трафик и улучшить UX при вводе с автоподсказками или выполнении динамического поиска.

Практический контекст

В React-проектах fetch-запросы нередко отменяют внутри хука useEffect с использованием AbortController. Это позволяет избежать утечек памяти и попыток изменить состояние уже размонтированного компонента. В Next.js и других фреймворках такой подход также предотвращает конкуренцию запросов при быстрой смене маршрутов и сокращает расход сетевого трафика.