all-threads-bot

Frontender`s Spectre

AbortController в JavaScript: возможность отмены операций для более отзывчивых приложений

10 апреля 2023 г., 17:00

AbortController в JavaScript: возможность отмены операций для более отзывчивых приложений

AbortController - это новая функциональность, которая была введена в JavaScript вместе с API Fetch в стандарте ECMAScript 2017. Этот объект предоставляет возможность отмены HTTP запроса или другой операции, которая может занять много времени.

AbortController - это объект, который содержит метод abort(), который может быть вызван, чтобы отменить операцию. Вызов этого метода приводит к генерации объекта AbortSignal, который может быть использован для сообщения о том, что операция была отменена.

Рассмотрим следующий пример:

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

fetch('/data', { signal }).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

controller.abort();

Здесь мы создаем новый объект AbortController и получаем свойство signal. Затем мы передаем signal в параметры запроса Fetch. При вызове метода abort() нашего объекта controller, запрос Fetch будет отменен, и мы получим ошибку AbortError.

Это очень удобно, когда у нас есть задача, которая может занять много времени, и пользователь хочет отменить ее. Например, если мы хотим загрузить изображение с сервера, мы можем использовать объект AbortController, чтобы дать пользователю возможность отменить загрузку в любое время.

Однако, не все браузеры поддерживают AbortController. В этом случае можно использовать полифилл, который эмулирует этот функционал.

import "abortcontroller-polyfill/dist/polyfill-patch-fetch.js";

В заключение, AbortController - это очень полезный объект в JavaScript, который позволяет отменять операции, которые могут занять много времени. Это делает наши приложения более отзывчивыми и позволяет пользователям контролировать выполнение длительных задач.