🚀 AbortController — как правильно отменять запросы

➡️ Проблема (1 картинка):

Пользователь быстро переключает вкладки или вводит текст в поиске. Старые запросы продолжают работать и могут перезаписать актуальные данные.

➡️ Решение (2 картинка):

Отменяйте предыдущие запросы через AbortController

Что это даёт:

🟢 Нет race condition — обновляется только последний запрос

🟢 Браузер действительно отменяет запрос на уровне сети

🟢 Код без лишних флагов вроде isCancelled

🟢 Работает с API, которые поддерживают AbortSignal (fetch, Axios ≥0.22, React Query)

Когда применять:

— Автодополнение и live-поиск
— Переключение вкладок и фильтров
— Отмена запросов при размонтировании компонента
— Повторные запросы в useEffect при изменении зависимостей

⚠️ Важные детали:

controller.abort() можно вызывать многократно — это безопасно
Отмена происходит на стороне клиента — запрос может дойти до сервера
После abort() новые запросы с тем же controller не сработают (создавайте новый)

Поддержка:

🟣 Fetch API — нативно
🟣 Axios ≥ 0.22 — через signal
🟣 React Query — через queryFn

🐸 Библиотека фронтендера

#hotfix #react