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

Question

Для отмены fetch используется AbortController. Создаем контроллер, передаем его в fetch, и при необходимости вызываем abort().

YeaHub · Accepted Answer

1. Использование AbortControllerconst controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  	.then(response => response.json())
  	.catch(err => {
    		if (err.name === 'AbortError') {
      			console.log('Запрос отменён');
    		} else {
      			console.error('Ошибка:', err);
    		}
  });

// Отменяем запрос через 2 секунды
setTimeout(() => controller.abort(), 2000);2. Интеграция с React/AxiosВ Axios есть встроенная отмена через CancelToken (в старых версиях) или AbortController (новые версии).Пример с Axios:const controller = new AbortController();

axios.get('https://api.example.com/data', {
  	signal: controller.signal
})
  .then(response => console.log(response.data))
  .catch(err => {
    	if (axios.isCancel(err)) {
      		console.log('Запрос отменён');
    	}
  });

// Отмена
controller.abort();3. Зачем это нужно?Если пользователь ушел со страницы, но запрос еще выполняется.При частых изменениях фильтров (например, поиск с автодополнением).Для оптимизации производительности.Важно: После abort() Promise переходит в состояние rejected с ошибкой AbortError.