This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

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.

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

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

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