Metode komunikasi yang paling banyak digunakan dan dikenal antara browser dan server adalah Http/s. Ini adalah protokol yang dibangun berdasarkan Request/Response. Hari ini, kita akan berlatih tentang Fetch API, salah satu jenis WebAPI yang menyediakan komunikasi ini.

Sebelum artikel ini, saya sarankan Anda untuk membaca Fetch API Practices — 1 artikel. Skenario kita kali ini adalah sebagai berikut…

Dengan debounce (0,5s) ketika kita menulis nama pengguna di bidang Teks di bawah ini . Dengan kata lain, setiap kali kita menekan tombol keyboard, kita ingin itu mencari server dan menampilkan hasil pencarian ini di layar setelah menunggu setidaknya 0,5 detik, bukan mencari.

Harapan lain adalah layarnya State.

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

Bagian berikut melakukan operasi pengambilan kami. Ketika kita melakukan q=…, ia mencari server dan mengembalikan hasilnya.

Seperti yang Anda lihat dari contoh ini, kami menaburkan UState di antaranya. Kami mengonversi menjadi pengambilan sebelum ekstraksi data, diambil setelah data diterima, dan status kesalahan jika terjadi kesalahan.

Dan menurut status ini, kami melakukan operasi Render di layar.

Masalah penting di sini adalah bahwa setiap kali kita menekan tombol keyboard, Backend tidak mengirim operasi pengambilan, itu memicu operasi pencarian jika ada perubahan pada kata yang dicari dengan menempatkan jeda 0,5 detik di antara mereka.

Untuk ini kita perlu melakukan debounce. Dengan melakukan pencarian dengan nilai yang terakumulasi dalam 0,5 detik dengan timer tertentu, kami tidak melelahkan backend lebih dari yang diperlukan.

Kode sumber

• Ambil Contoh Reaksi

Anda dapat mengklik tautan ini untuk mengakses sisa artikel ini atau artikel lain di grup artikel .