Как прервать запросы API в JavaScript

По разным причинам: для проверки подлинности учетных данных пользователя, получения ресурсов, создания ресурсов и многого другого.

Знаете ли вы, что в JavaScript можно прервать запрос API? Под прерыванием я подразумеваю отмену запроса до его завершения (до получения ответа или до того, как запрос попадет на сервер).

Есть много причин, по которым вы можете захотеть это сделать. Одна из них — предотвратить отправку запроса на сервер, если пользователь уже перешел со страницы, на которой был сделан запрос.

Отмена запросов поможет вам избежать ненужного сетевого трафика, сэкономить память и ресурсы, а также повысить производительность.

Существует множество способов выполнения API-запросов в JavaScript. В этой статье я сосредоточусь на fetch и axios.

Как же сделать отмену запросов в этих методах?

Интерфейс AbortController

Web API предоставляет интерфейс AbortController, объект JavaScript, который позволяет вам прерывать запросы, когда вы захотите. Вот как создать объект AbortController:

const controller = new AbortController()
Вход в полноэкранный режим Выйти из полноэкранного режима

Этот объект controller имеет два важных свойства для прерывания запросов.

Первое свойство — это объект signal. Этот объект является уникальным идентификатором запроса. Структура этого объекта выглядит следующим образом:

{
  // other properties
  aborted: false,
  onabort: null
}
Вход в полноэкранный режим Выход из полноэкранного режима

Второе свойство — это метод abort(). Этот метод используется для обновления флага aborted уникального сигнала запроса. При вызове этого метода все наблюдатели объекта signals будут уведомлены, и запросы будут отменены.

Когда функция abortRequest будет вызвана в любой точке вашего приложения (например, событие нажатия кнопки), будет вызван метод abort, объект abortSignal будет обновлен, и все наблюдатели будут уведомлены.

Теперь давайте посмотрим, как это использовать в fetch и axios.

Прерывание запросов API в Fetch

Метод fetch — это функция JavaScript, используемая для выполнения API-запросов. Он принимает два аргумента: URL конечной точки API и объект, содержащий параметры запроса:

fetch(api, requestOptions)
Войти в полноэкранный режим Выйти из полноэкранного режима

Объект requestOptions принимает множество свойств, но самым важным является свойство signal. К этому свойству можно присоединить объект signal из контроллера:


const controller = new AbortController()

const abortSignal = controller.signal

function abortRequest() {
  controller.abort()
}

fetch("api", {
  signal: abortSignal,
})

Вход в полноэкранный режим Выйти из полноэкранного режима

Таким образом, когда будет вызвана функция abortRequest, выражение fetch получит уведомление, и запрос будет отменен.

Прерывание запросов API в Axios

Axios — это библиотека JavaScript, которая используется для выполнения API-запросов. Она имеет очень похожий синтаксис на метод fetch. Он также принимает свойство signal в объекте опций запроса. Поэтому мы также можем присоединить объект signal из контроллера следующим образом:


const controller = new AbortController()

const abortSignal = controller.signal

function abortRequest() {
  controller.abort()
}

axios.get("api", {
  signal: abortSignal,
})

Войти в полноэкранный режим Выйти из полноэкранного режима

Когда флаг aborted объекта signal будет обновлен до true, это выражение axios будет уведомлено, и запрос будет отменен.

Даже для новых методов выполнения API-запросов, принимая свойство signal в их объекте request options, можно прервать запросы, используя метод abort().

Оцените статью
Procodings.ru
Добавить комментарий