AbortController: свойство signal

Чтение только свойство signal интерфейса AbortController возвращает экземпляр объекта AbortSignal, который может быть использован для взаимодействия с асинхронной операцией и ее прерывания по мере необходимости.

Экземпляр объекта AbortSignal.

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

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

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

const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

Вы можете найти полный работающий пример на GitHub; вы также можете посмотреть его в действии.

• API Fetch