Совет - Работа с AbortController

Есть несколько сценариев, в которых вы хотели бы отменить запрос сервера. Например, ваш пользователь запрашивает отчет, на получение которого уходит много времени, и он передумал и запросил другой отчет. Что ты будешь делать? Здесь может оказаться очень кстати AbortController.

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

Прекратите получение, пожалуйста

AbortController - это объект, который может помочь вам прервать запросы на выборку. Как ты это делаешь? Прежде всего, создайте новый AbortController:

const abortCtrl = new AbortController();

Если у вас есть экземпляр AbortController, вы можете использовать его API для прерывания запросов на выборку. AbortController включает одно свойство signal и одну функцию abort. Свойство signal используется для получения объекта AbortSignal. Этот объект используется запросом выборки для связи между запросом выборки и AbortController. Вы передаете объект AbortSignal для извлечения функции как часть его объекта параметров. Вот пример использования:

const abortCtrl = new AbortController();
const signal = abortCtrl.signal;
fetch(url, { signal }).then((response) => {
...
}).catch((e) => {
...    
});

Как только функция выборки включает сигнал, вы можете прервать запрос выборки. Если вам нужно отменить запрос, все, что вам нужно сделать, это вызвать функцию AbortController abort. Например:

abortCtrl.abort();

Запросы, которые были прерваны, приведут к отклонению обещания выборки с помощью AbortError. Это означает, что функция обратного вызова catch будет работать с объектом AbortError, который имеет код ошибки 20. Используя эти знания, вы можете добавить логику для обработки сценария прерывания:

const abortCtrl = new AbortController();
const signal = abortCtrl.signal;
fetch(url, { signal }).then((response) => {
...
}).catch((e) => {
    if (error.code === 20) { // abort occurred
        // Do something after abort occurred
    }
});

Резюме

В этом коротком сообщении объясняется, что такое AbortContoller и как его использовать в коде. Дайте мне знать в комментариях, если вы сочли это полезным.