Храните query, results, loading и error в signals. Планируйте запрос после debounce, отменяйте старый таймер и проверяйте номер операции перед записью результата.
Как организовать поиск Angular с Signals и debounce
Храните query, results, loading и error в signals. Планируйте запрос после debounce, отменяйте старый таймер и проверяйте номер операции перед записью результата.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Нужно построить поиск товаров в Angular: поле ввода, задержка 300 мс, searchProducts(query): Promise<Product[]>, список и состояние загрузки. Результат устаревшего поиска нельзя отображать.
Ответ
Храните query, results, loading и error в signals. Планируйте запрос после debounce, отменяйте старый таймер и проверяйте номер операции перед записью результата.
Поле меняет query; реакция на его изменение очищает таймер и увеличивает generation. Для пустой строки сразу очищайте результаты. Для непустой планируйте запрос на 300 мс, захватив generation; success, catch и finally меняют signals лишь при его совпадении с текущим. При уничтожении компонента очистите таймер и инвалидируйте generation. Такая проверка защищает и от позднего finally, который иначе выключит индикатор нового запроса.