AbortController

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since март 2019 г..

Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

ИнтерфейсAbortController представляет объект контроллера, который позволяет вам при необходимости обрывать один и более DOM запросов.

Вы можете создать новый объектAbortController используя конструкторAbortController.AbortController(). Взаимодействие с DOM запросами сделано с использованием объектаAbortSignal.

Конструктор

AbortController.AbortController(): Создаёт новый экземплярAbortController.

Свойства

AbortController.signalТолько для чтения: Возвращает экземплярAbortSignal, который может быть использован для коммуникаций/остановки DOM запросов.

Методы

AbortController.abort(): Прерывает DOM запрос до момента его завершения. Это даёт возможность обрыватьfetch запросы, потребителей любых ответов сBody и потоки.

Примеры

В текущем фрагменте мы пытаемся скачать видео используяFetch API.

Для начала мы создадим контроллер используя конструкторAbortController(), затем возьмём ссылку на ассоциированный с ним объектAbortSignal используя свойствоAbortController.signal.

При инициализацииfetch запроса, мы передаёмAbortSignal в качестве параметра (смотрите ниже{signal}). Это ассоциирует сигнал и контроллер с fetch запросом и даёт нам возможность остановить запрос вызовом методаAbortController.abort(), что можно увидеть во втором addEventListener.

var controller = new AbortController();var signal = controller.signal;var downloadBtn = document.querySelector('.download');var abortBtn = document.querySelector('.abort');downloadBtn.addEventListener('click', fetchVideo);abortBtn.addEventListener('click', function() {  controller.abort();  console.log('Download aborted');});function fetchVideo() {  ...  fetch(url, {signal}).then(function(response) {    ...  }).catch(function(e) {    reports.textContent = 'Download error: ' + e.message;  })}

Примечание:При вызовеabort(), промисfetch() будет отклонён сAbortError.

Вы можете найти полный рабочий пример на GitHub — смотритеabort-api (и живой пример).