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

Короткий ответ

Создайте AbortController, передайте его signal в fetch() и вызовите abort() для отмены:

const controller = new AbortController();
 
fetch('/api/big-file', { signal: controller.signal })
  .then((response) => response.blob())
  .catch((error) => {
    if (error.name === 'AbortError') console.log('Download cancelled');
  });
 
cancelButton.addEventListener('click', () => controller.abort());

Только последний поиск

Когда пользователь печатает быстро, старые ответы могут прийти позже новых. Отменяйте предыдущий запрос перед отправкой следующего:

let controller = null;
 
searchInput.addEventListener('input', async () => {
  controller?.abort();
  controller = new AbortController();
  try {
    const response = await fetch(`/api/search?q=${encodeURIComponent(searchInput.value)}`, {
      signal: controller.signal,
    });
    showResults(await response.json());
  } catch (error) {
    if (error.name !== 'AbortError') throw error;
  }
});

Частая ошибка

Контроллер отменяется только один раз. После abort() его сигнал остаётся отменённым, поэтому для каждого запроса создавайте новый контроллер.

const controller = new AbortController();
controller.abort();
 
console.log(controller.signal.aborted);

Результат:

true

Спасибо, что читаете!

Короткий ответ

Только последний поиск

Частая ошибка

Функции из этого ответа

Спасибо, что читаете!