Как отменять устаревшие fetch-запросы в автодополнении

Быстрый ввод запускает несколько запросов. Если ранний ответ придёт позже нового, он перезапишет актуальную выдачу. AbortController убирает эту гонку: его signal передают в fetch, а перед следующим запросом вызывают abort() у предыдущего контроллера.

В React схему можно собрать в useEffect: поставить задержку на 250 мс, после паузы отправить запрос, а при очистке эффекта сбросить таймер и отменить запрос. Задержка сокращает число обращений, отмена не даёт запоздавшему ответу дойти до отрисовки. AbortError при этом обрабатывают отдельно от остальных ошибок.

Я сохранил себе ключевое ограничение: отменённый контроллер одноразовый, для следующего запроса нужен новый. Проверить весь сценарий можно на демо автодополнения с готовым кодом.
Просмотры: 70
Открыть в MAX Сообщить о неточности

Сообщить о неточности

Опишите, что нужно исправить. Если есть источник, добавьте ссылку.

Вы покидаете datool.ru

Ссылка ведёт на внешний сайт. datool.ru не отвечает за его содержимое — проверьте адрес, прежде чем вводить пароли или платёжные данные.

Переход через 10 с

Перейти