AbortController

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 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.

js
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 (и живой пример).

Спецификации

Specification
DOM
# interface-abortcontroller

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также