Поиск с загрузкой и ошибкой
Условие
Поле поиска по списку. Требования, как их давали на собеседовании: · одно поле <input class="q">, запрос уходит по вводу; · список результатов - <li class="item"> с именем; · пока идёт запрос - <div class="loading">; · если запрос ответил ошибкой - <div class="error">; · пустой результат - <div class="empty">; · ответ на устаревший запрос не должен перетирать свежий.
Что проверяют тесты
пустой запрос ничего не грузит
показывает загрузку, потом результаты
показывает ошибку
пустой результат
устаревший ответ не перетирает свежий
новая попытка убирает старую ошибку
Как подойти
Эту задачу дают почти везде, и валятся на ней не из-за сложности, а из-за несогласованных состояний: индикатор загрузки остаётся после ошибки, старая ошибка висит поверх новых результатов, «ничего не найдено» показывается во время загрузки. Проговори матрицу состояний вслух до написания кода - это ровно то, что оценивают. Защита от гонки счётчиком в ref обязательна: без неё медленный ответ на короткий запрос перетрёт быстрый ответ на длинный. Что назвать дальше: debounce, отмена через AbortController, кеш по запросу, повтор при ошибке.
Подсказки: 3
- Четыре состояния: запрос, данные, загрузка, ошибка - и все должны быть согласованы.
- Ошибку надо сбрасывать в начале нового запроса, а не только при успехе.
- Счётчик запросов в ref защищает от прихода ответов не по порядку.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.