Как отменить запрос на выборку

JavaScript

Автор: Дэвид Уолш

Перевод: сумасшедший технический ботаник

оригинал:Дэвид Уолш Затем /cancel-F и т.д.

Копирование без разрешения строго запрещено

Обещания JavaScript стали большой победой для языка — они вызвали революцию в асинхронном программировании и значительно повысили производительность веб-приложений. Одним из недостатков нативных промисов является то, что на данный момент их нельзя отменить.fetchреальный метод. Добавлены новые в спецификацию JavaScriptAbortController, что позволяет разработчикам прерывать одно или несколько действий с помощью сигналаfetchпередача.

Ниже приведены отменыfetchВызванный рабочий процесс:

  • СоздаватьAbortControllerпример
  • Экземпляр имеетsignalАтрибуты
  • Будуsignalпередан для получения опцииsignal
  • передачаAbortControllerизabortдля отмены всех выборок, использующих этот сигнал.

Прервать выборку

Вот основные шаги для отмены запроса на выборку:

const controller = new AbortController();
const { signal } = controller;

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});

// Abort request
controller.abort();

существуетabortпроисходит при вызовеAbortError, так что вы можете прослушать, сравнив имя ошибкиcatchПрервать операцию в .

}).catch(e => {
    if(e.name === "AbortError") {
        // We know it's been canceled!
    }
});

передать один и тот же сигнал несколькимfetchВызов отменит все запросы на этот сигнал:

const controller = new AbortController();
const { signal } = controller;

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 2 is complete!`);
}).catch(e => {
    console.warn(`Fetch 2 error: ${e.message}`);
});

// Wait 2 seconds to abort both requests
setTimeout(() => controller.abort(), 2000);

Джек Арчибальд в своей статьеAbortable fetch, подробно описывает красивое приложение, которое можно использовать для создания прерываемой выборки без всего шаблонного кода:

function abortableFetch(request, opts) {
  const controller = new AbortController();
  const signal = controller.signal;

  return {
    abort: () => controller.abort(),
    ready: fetch(request, { ...opts, signal })
  };
}

Честно говоря, я не в восторге от способа отмены Fetch. В идеальном мире Обещание, возвращенное Fetch,.cancel()Это было бы круто, но это также принесло бы некоторые проблемы. В любом случае я могу отменитьFetchПриятно звонить, и вам тоже!

Добро пожаловать в общедоступную учетную запись внешнего интерфейса: Front-end Pioneer, получите бесплатный набор утилит для разработки внешнего интерфейса.

Категории