AbortController

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

Интерфейс 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 (и живой пример).

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

Спецификация Статус Комментарий
DOM
Определение 'AbortController' в этой спецификации.
Живой стандарт Начальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержка
Экспериментальная
Chrome Полная поддержка 66Edge Полная поддержка 16Firefox Полная поддержка 57IE Нет поддержки НетOpera Полная поддержка 53Safari Полная поддержка 11.1WebView Android Полная поддержка 66Chrome Android Полная поддержка 66Edge Mobile Полная поддержка 16Firefox Android Полная поддержка 57Opera Android Полная поддержка 53Safari iOS Полная поддержка 11.1Samsung Internet Android Нет поддержки Нет
AbortController() constructor
Экспериментальная
Chrome Полная поддержка 66Edge Полная поддержка 16Firefox Полная поддержка 57IE Нет поддержки НетOpera Полная поддержка 53Safari Полная поддержка 11.1WebView Android Полная поддержка 66Chrome Android Полная поддержка 66Edge Mobile Полная поддержка 16Firefox Android Полная поддержка 57Opera Android Полная поддержка 53Safari iOS Полная поддержка 11.1Samsung Internet Android Нет поддержки Нет
signal
Экспериментальная
Chrome Полная поддержка 66Edge Полная поддержка 16Firefox Полная поддержка 57IE Нет поддержки НетOpera Полная поддержка 53Safari Полная поддержка 11.1WebView Android Полная поддержка 66Chrome Android Полная поддержка 66Edge Mobile Полная поддержка 16Firefox Android Полная поддержка 57Opera Android Полная поддержка 53Safari iOS Полная поддержка 11.1Samsung Internet Android Нет поддержки Нет
abort
Экспериментальная
Chrome Полная поддержка 66Edge Полная поддержка 16Firefox Полная поддержка 57IE Нет поддержки НетOpera Полная поддержка 53Safari Полная поддержка 11.1WebView Android Полная поддержка 66Chrome Android Полная поддержка 66Edge Mobile Полная поддержка 16Firefox Android Полная поддержка 57Opera Android Полная поддержка 53Safari iOS Полная поддержка 11.1Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

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

Метки документа и участники

Внесли вклад в эту страницу: SerzN1
Обновлялась последний раз: SerzN1,