AbortController

Интерфейс AbortController представляет собой объект контроллера, который позволяет прерывать один или несколько веб-запросов по мере необходимости.

Вы можете создать новый объект AbortController с помощью конструктора AbortController(). Взаимодействие с асинхронной операцией выполняется с помощью объекта AbortSignal.

AbortController()

Создает новый экземпляр объекта AbortController.

AbortController.signal Только для чтения

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

AbortController.abort()

Прерывает асинхронную операцию до её завершения. Это позволяет прервать запросы fetch, обработку любых ответных тел и потоки.

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

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

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

Когда вызывается abort(), обещание fetch() отклоняется с исключением DOMException, имеющим имя AbortError.

let controller;
const url = "video.mp4";

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

downloadBtn.addEventListener("click", fetchVideo);

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

async function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(url, { signal });
    console.log("Download complete", response);
    // process response further
  } catch (err) {
    console.error(`Download error: ${err.message}`);
  }
}

Если запрос прерывается после выполнения вызова fetch(), но до чтения тела ответа, то попытка прочитать тело ответа приведет к отклонению с исключением AbortError.

async function get() {
  const controller = new AbortController();
  const request = new Request("https://example.org/get", {
    signal: controller.signal,
  });

  const response = await fetch(request);
  controller.abort();
  // The next line will throw `AbortError`
  const text = await response.text();
  console.log(text);
}

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

• Fetch API
• Abortable Fetch от Джейка Арчибальда