Najczęściej stosowaną i znaną metodą komunikacji między przeglądarką a serwerem jest Http/s. Jest to protokół zbudowany w oparciu o żądanie/odpowiedź. Dzisiaj przećwiczymy Fetch API, jeden z typów WebAPI zapewniających tę komunikację.

Przed tym artykułem polecam zapoznać się z praktykami Fetch API — 1 artykuł. Nasz scenariusz tym razem wygląda następująco…

Przez odbicie (0,5 s), gdy wpiszemy nazwę użytkownika w polu tekstowym poniżej . Innymi słowy, za każdym razem, gdy naciśniemy klawisz klawiatury, chcemy, aby przeszukał serwer i wyświetlił wynik tego wyszukiwania na ekranie po odczekaniu co najmniej 0,5 sekundy, bez wyszukiwania.

Innym oczekiwaniem jest to, że ekran to stan.

const UISTATE = {
   initial: 'inital (ilk başlangıç)
   fetching: 'fetching', (veri çekiliyor)
   fetched: 'fetched', (veri başarılı bir şekilde çekildi)
   error: 'error', (veri çekilmesinde problem yaşandı)
}

//Toolu indir
npm install -g json-server //JSon Server ilgili port kendi db.json ile calistir.
JsonServer Calıstırın.
json-server --watch db.json --port 3004

Poniższa część wykonuje naszą operację pobierania. Kiedy robimy q=…, przeszukuje serwer i zwraca wyniki.

Jak widać na tym przykładzie, posypujemy UIState pomiędzy. Konwertujemy na pobieranie przed wyodrębnieniem danych, pobieranie po odebraniu danych i stan błędu, jeśli wystąpi błąd.

I zgodnie z tym stanem wykonujemy operację Renderuj na ekranie.

Istotną kwestią jest tutaj to, że za każdym razem, gdy naciśniemy klawisz klawiatury, Backend nie wysyła operacji pobierania, ale uruchamia operację wyszukiwania, jeśli nastąpi zmiana w wyszukiwanym słowie, umieszczając między nimi 0,5 sekundy przerwy.

W tym celu musimy się wycofać. Wykonując wyszukiwanie z wartościami skumulowanymi w 0,5 sekundy z określonym timerem, nie męczymy backendu bardziej niż to konieczne.

Kod źródłowy

• Pobieranie próbki reakcji

Możesz kliknąć to łącze, aby uzyskać dostęp do reszty tego artykułu lub innych artykułów w grupie artykułów .