Отмена запроса fetch

Существует ошибочное мнение, что запрос с помощью fetch нельзя отменить, так как он возвращает, как известно Promise, у которого в интерфейсе не предусмотрено никакой отмены. На самом деле можно. Для этого используем AbortController. Помечено, как экспериментальное, но на текущий момент времени работает везде, кроме IE. Это объект с простейшим интерфейсом:

  • signal: AbortSignal Это EventTarget с одним событием abort
  • abort() возбуждает событие abort на signal

signal подкладываем в параметры fetch, и когда надо "сигналим", что запрос надо отменить. При этом промис будет фейлиться с исключением AbortError.

const abortController = new AbortController();
const promise = fetch(url, {
    method: 'GET',
    signal: abortController.signal,
})
.then(null, err => {
    if (err instanceof DOMException && (err as DOMException).code === DOMException.ABORT_ERR) {
        // request canceled with AbortController
        return false;
    }
    throw err;
});

// cancel request:
// abortController.abort()

Один signal можно дать более чем одному fetch. Все вместе прекрасно отменятся.

Статья с историей AbortController'а.