Введение
При реализации функций, связанных с выполнением запросов API, бывают случаи, когда нам необходимо отменить ожидающий запрос либо на основании требований к функциям, либо для предотвращения неожиданного поведения в нашем приложении.
Некоторые из этих случаев включают:
- Предоставление пользователям возможности отменить ожидающий запрос.
- Прерывание текущего запроса, когда пользователь покидает страницу.
- Отмена ожидающих запросов перед созданием нового при изменении ввода.
Для обработки таких сценариев большинство современных браузеров имеют встроенный интерфейс AbortController, который позволяет отменить один или несколько запросов API при использовании Fetch API.
HTTP-клиентский пакет Axios обрабатывает отмену запроса API, используя свой API токена отмены, основанный на отозванном предложении об отменяемых обещаниях.
Цель
Чтобы продемонстрировать, как отменять запросы API с помощью Fetch API и токена отмены Axios, мы реализуем функцию автозаполнения поиска.
Поиск с автозаполнением будет делать запрос API каждый раз, когда пользователь вводит значение в строке поиска.
Эта функция продемонстрирует, как отменить ожидающие запросы API перед созданием нового каждый раз, когда содержимое ввода изменяется.
Схема нашей реализации:
Прежде чем мы перейдем к нашей реализации, давайте создадим поле ввода поиска, затем добавим прослушиватель событий и обратный вызов прослушивателя.
Сначала мы выберем поле ввода поиска:
const input = document.querySelector(‘#search’);
Затем мы добавляем прослушиватель событий в поле поиска и обратный вызов searchItems, который вызывается при изменении ввода.
input.addEventListener(‘input’, searchItems);
Функция обратного вызова searchItems будет реализована с использованием Fetch API и аксиом, причем каждая строка будет прокомментирована, чтобы объяснить, что они делают.
Реализация API выборки
Прежде чем сделать запрос API, мы создадим контроллер с помощью конструктора AbortController(), а затем получим ссылку на связанный с ним объект AbortSignal с помощью свойства AbortController.signal.
Когда инициируется запрос API на выборку, мы передаем AbortSignal в качестве параметра внутри объекта параметров запроса, это связывает сигнал и контроллер с запросом на выборку и позволяет нам прервать его, вызвав AbortController.abort().
Важно отметить, что при вызове метода abort() обещание fetch() отклоняется с помощью DOMException с именем AbortError. Мы можем использовать имя DOMException, чтобы узнать, произошла ли ошибка из-за отмены запроса.
Давайте приступим к реализации, прокомментировав каждую строку, чтобы объяснить, что они делают.
Реализация аксиом
Чтобы отменить текущий запрос с помощью axios, вызывается метод cancel(…) из API токена отмены, который принимает необязательный параметр для сообщения.
Перед выполнением запроса API будет сгенерирован токен отмены, который будет передан в качестве опции в конфигурацию axios. Маркер связывает текущий запрос и метод cancel(…).
Когда обещание axios отклоняется из-за отмены, метод axios.isCancel(…), который принимает исключение в качестве аргумента, используется для проверки того, было ли исключение вызвано отменой.
Давайте приступим к реализации, прокомментировав каждую строку, чтобы объяснить, что они делают.
Вывод
В этом руководстве мы узнали, как отменить запрос Fetch API и Axios, внедрив функцию автозаполнения поиска. Я надеюсь, что с этой реализацией вы сможете создать функцию отмены запроса по мере необходимости.
