AbortController: метод abort()

Метод abort() интерфейса AbortController прерывает асинхронную операцию до её завершения. Он может прервать запросы fetch, чтение тела ответа или потоков.

reason Необязательно

Причина прерывания операции, которая может быть любым значением JavaScript. Если не указано, причина устанавливается в «AbortError» DOMException.

Ничего (undefined).

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

Сначала мы создаём контроллер с помощью конструктора 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; вы также можете посмотреть его в работе.

• Fetch API