Wyszukiwarka, która pokazuje stary wynik
Polecenie: po wpisaniu nowej frazy starsze żądanie czasami kończy się później i nadpisuje wynik. Napraw to oraz obsłuż błąd i zakończenie pracy komponentu. Najpierw wyjaśnij problem na dwóch żądaniach, bez pisania kodu.
Sprawdza: efekty, stan, domknięcia i pracę asynchroniczną.
Testy dotyczą wyizolowanej logiki; nie są testem uruchomionego komponentu React. Napisz createLatestSearch(load, publish), które zwraca { search(query), dispose() }. load(query, signal) zwraca Promise, a publish dostaje {status: 'success', value} lub {status: 'error', error} — tylko dla najnowszego, nieanulowanego zapytania, także gdy API ignoruje abort. Komponent React z tym samym podejściem jest w materiałach referencyjnych.
Dopytanie: co po odmontowaniu albo przy ignorowaniu sygnału anulowania?
Przećwiczysz
- Rozpoznać wyścig dwóch żądań
- Oznaczyć, która odpowiedź jest nadal aktualna
- Anulować poprzednie żądanie
- Nie publikować stanu po dispose
Testy (2)
Testy przeniesione z reference.test.ts materiału źródłowego (node:test). W przeglądarce działają z tym samym zestawem asercji.
search: starszy sukces nie nadpisuje nowszego, nawet gdy abort ignorowany
const a = deferred(), b = deferred(), seen = [];
const s = createLatestSearch(q => q === 'a' ? a.promise : b.promise, x => seen.push(x));
const p = s.search('a'), q = s.search('b');
b.resolve('new'); await q; a.resolve('old'); await p;
assert.deepEqual(seen, [{ status: 'success', value: 'new' }]);search: stary błąd i dispose nie publikują stanu
const a = deferred(), b = deferred(), seen = [];
const s = createLatestSearch(q => q === 'a' ? a.promise : b.promise, x => seen.push(x));
const p = s.search('a'), q = s.search('b');
a.reject(new Error('old')); await p; s.dispose(); b.resolve('late'); await q;
assert.deepEqual(seen, []);Powiązane pytania
Źródło: AI & Agents — ćwiczenia praktyczne — Autorskie ćwiczenie z programu nauki, nie potwierdzone zadanie rekrutacyjne.