Memahami Mengapa Ambil Memerlukan menunggu Dua Kali✨

API pengambilan JavaScript digunakan secara meluas untuk membuat permintaan HTTP, tetapi mungkin agak sukar untuk memahami sebab kadangkala memerlukan dua kenyataan menunggu. Jika anda pernah menggunakan fetch sebelum ini, anda mungkin pernah menemui kod seperti ini:

const response = await fetch('https://api.example.com/data');
const data = await response.json();

Mari kita pecahkan perkara ini dan fahami mengapa corak ini diperlukan. ?

Proses Dua Langkah Ambil ?️

API pengambilan direka untuk mengendalikan permintaan rangkaian secara tidak segerak, tetapi kelakuannya dibahagikan kepada dua peringkat utama:

1. Mengambil Respons ?

   • Apabila anda memanggil ambil, ia mengembalikan Janji yang diselesaikan kepada objek Respons sebaik sahaja permintaan rangkaian selesai.
   • Langkah ini tidak memproses badan tindak balas; ia hanya memastikan bahawa permintaan itu berjaya dan pengepala tersedia.

2. Membaca Badan Tindak Balas ?

   • Objek Respons mempunyai kaedah seperti .json(), .text(), dan .blob() untuk membaca kandungan sebenar.
   • Kaedah ini juga mengembalikan Janji kerana membaca badan adalah tidak segerak. Ini diperlukan untuk mengendalikan muatan besar dengan cekap tanpa menyekat benang utama.

Apa yang Berlaku Semasa Penantian Pertama? ⏳

Apabila anda menulis respons const = tunggu fetch(url);, inilah yang berlaku:

1. Permintaan Rangkaian Dihantar: ?

   • Pelayar memulakan permintaan HTTP ke URL yang ditentukan.
   • Ini melibatkan penyelesaian nama domain, mewujudkan sambungan TCP dan menghantar pengepala dan kandungan HTTP (untuk permintaan POST).

2. Metadata Balasan Diterima: ?

   • Panggilan pengambilan diselesaikan sebaik sahaja pelayan membalas dengan baris status (cth., HTTP/1.1 200 OK) dan pengepala. Pada ketika ini:
     • Status (cth., 200, 404, atau 500) dan statusTeks (cth., "OK" atau "Tidak Ditemui") tersedia.
     • Pengepala respons seperti Jenis Kandungan, Panjang Kandungan dan sebarang pengepala tersuai yang dihantar oleh pelayan boleh diakses.

3. Objek Respons Dicipta: ?️

   • Pelayar membina objek Respons yang mengandungi metadata tentang respons. Ini termasuk:
     • Pengepala: Boleh diakses melalui response.headers, yang membolehkan anda memeriksa pengepala tertentu seperti Jenis Kandungan atau Keizinan.
     • Badan: Pada ketika ini, kandungan belum dibaca atau dihuraikan sepenuhnya—ia kekal sebagai strim yang boleh dibaca.

Sebagai contoh, jika pelayan kembali:

   HTTP/1.1 200 OK
   Content-Type: application/json
   Content-Length: 123

   {"message": "Hello, world!"}

Objek Respons akan mengandungi:

• status: 200 ✅
• statusTeks: "OK" ✅
• pengepala: Koleksi pengepala respons yang boleh diubah (cth., Jenis Kandungan: application/json).
• badan: Strim boleh dibaca yang belum dihuraikan lagi.

Apa yang Berlaku Semasa Penantian Kedua? ?

Apabila anda menulis data const = await response.json();, langkah berikut berlaku:

1. Baca Strim Badan: ?

   • Badan respons (masih dalam bentuk mentah) dibaca sebagai aliran. Bergantung pada kaedah yang anda gunakan, data mentah diproses dengan sewajarnya:
     • .json(): Menghuraikan strim sebagai JSON dan mengembalikan objek JavaScript.
     • .text(): Membaca strim sebagai rentetan teks biasa.
     • .blob(): Membaca strim sebagai objek besar binari.

2. Menghuraikan dan Menyelesaikan: ?

   • Kaedah json() menghuraikan data mentah (cth., {"message": "Hello, world!"}) ke dalam objek JavaScript yang boleh digunakan (cth., { message: "Hello, world!" }).
   • Proses penghuraian ini tidak segerak kerana ia melibatkan pemprosesan data yang berpotensi besar.

3. Resolusi Janji: ✅

   • Janji yang dikembalikan melalui response.json() menyelesaikan kepada data yang dihuraikan, yang kemudiannya boleh digunakan dalam aplikasi anda.

Mengapa Dua Penyata menunggu Diperlukan?

Inilah sebab anda perlu menunggu dua kali:

1. Tunggu dahulu (Menunggu Maklum Balas):

   • Panggilan ambil tidak memberikan data respons dengan serta-merta; ia memberi anda Janji. Anda perlu menunggunya untuk mendapatkan objek Respons.

2. Penantian kedua (Menghurai Badan):

   • Kaedah .json() (atau kaedah membaca badan lain) mengembalikan Janji yang lain. Anda perlu menunggu ini untuk mengekstrak kandungan yang dihuraikan.

Jika anda melangkau sama ada menunggu, anda mungkin akan mengalami tingkah laku yang tidak dijangka:

• Melangkau penantian pertama: Anda akan bekerja dengan Janji yang belum diselesaikan dan bukannya objek Respons sebenar.
• Melangkau menunggu kedua: Anda akan mendapat Janji dan bukannya data yang dihuraikan.

Contoh dengan Pengendalian Ralat ?️

Begini cara anda boleh mengendalikan ralat dengan betul semasa bekerja dengan pengambilan:

const response = await fetch('https://api.example.com/data');
const data = await response.json();

Perangkap Biasa ⚠️

1. Tidak Mengendalikan Ralat:

   • fetch tidak membuang ralat untuk ralat HTTP seperti 404 atau 500. Anda mesti menyemak response.ok atau response.status secara manual.

2. Melangkau penantian Kedua:

   • Terlupa menunggu .json() boleh membawa kepada pepijat di mana anda bekerja dengan Promise dan bukannya data sebenar.

3. Kekeliruan Antara API fetch dan Lama:

   • Pembangun yang beralih daripada API lama seperti XMLHttpRequest mungkin menjangkakan gelagat segerak, tetapi fetch sepenuhnya berasaskan Promise.

Kesimpulan ?

Menggunakan dua pernyataan menunggu dengan pengambilan mungkin kelihatan berlebihan pada mulanya, tetapi ini adalah hasil logik reka bentuk tak segeraknya. Penantian pertama memastikan respons telah diterima, termasuk pengepala dan metadata, manakala menunggu kedua memproses badan respons. Memahami aliran ini membantu anda menulis kod tak segerak yang lebih dipercayai dan boleh diselenggara. ?

Atas ialah kandungan terperinci Memahami Mengapa Ambil Memerlukan menunggu Dua Kali✨. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!