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.
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 Standard # interface-abortcontroller |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Fetch API
- Abortable Fetch от Jake Archibald