Как отменить уже отправленный HTTP запрос?

Для отмены уже отправленного запроса нам пригодится встроенный в JavsScript объект — AbortController Этот объект позволяет отменять уже запущенные асинхронные операции, fetch в том числе

javascript
1const controller = new AbortController()
2
3// отправляем запрос
4fetch('https://.../', { signal: controller.signal })
5
6// отменяем его
7controller.abort()
8

Нужно это много где, я приведу самый очевидный пример с реактом: Представим, что пользователь открывает страницу. На странице в useEffect идёт запрос к API, но пользователь, не дожидаясь ответа от сервера, переходит на другую страницу. Запрос есть, трафик занят, есть риск нарушения жизненного цикла компонента, а результаты этого запроса уже и вовсе не нужны.

Вот так это решается:

javascript
1useEffect(() => {
2  const controller = new AbortController()
3
4  // делаем запрос на маунт компонента
5  fetch('https://.../', { signal: controller.signal })
6
7  // отменяем запрос на анмаунт компонента
8  return () => controller.abort()
9}, [])
10

Использование AbortController'a помогает избежать потенциальных утечек памяти и гарантирует, что запросы не будут выполняться после того, как компонент был размонтирован. Полезно это при любых запросах, так что можно смело сделать свой хук обёртку. Или просто использовать @tanstack/react-query