Существует ошибочное мнение, что запрос с помощью 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'а.