Membuat Permintaan GET
Dapatkan data dan huraikan respons JSON.
Membuat Permintaan GET ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Fungsi Pengambilan
API Pengambilan membuat permintaan HTTP daripada pelayar dan mengembalikan Promise. Ia merupakan pengganti moden untuk XMLHttpRequest lama.
GET Asas
Panggil fetch(url) dengan URL. Secara lalai, ia menggunakan kaedah GET dan menyelesaikan dengan objek Response.
fetch("https://api.example.com/users")
.then((response) => {
console.log(response.status); // 200
});Objek Respons
Nilai yang telah diselesaikan ialah Response, bukannya data itu sendiri. Ia membawa status, pengepala dan kaedah untuk membaca isi. Anda mesti memanggil kaedah isi untuk mendapatkan kandungannya.
fetch(url).then((response) => {
console.log(response.ok); // true if status 200-299
console.log(response.status); // 200
});Menghuraikan JSON
Kebanyakan API mengembalikan JSON. Panggil response.json(), yang turut mengembalikan Promise yang menyelesaikan kepada objek yang telah dihuraikan.
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data); // parsed JS object/array
});Mengapa Dua Promise
Promise pertama diselesaikan apabila pengepala tiba; Promise kedua (.json()) diselesaikan apabila keseluruhan isi telah dimuat turun dan dihuraikan. Sebab itulah Anda merangkaikan dua panggilan .then().
Menggunakan async/await
Kebanyakan kod menggunakan async/await demi kebolehbacaan. Setiap await berhenti seketika sehingga Promise-nya diselesaikan.
async function getUsers() {
const response = await fetch(url);
const data = await response.json();
return data;
}Pembaca Isi Lain
Selain json(), respons boleh dibaca sebagai text(), blob() (binari), arrayBuffer() atau formData(). Pilih berdasarkan perkara yang dikembalikan oleh pelayan.
const response = await fetch(url);
const html = await response.text(); // raw stringIsi Dibaca Sekali Sahaja
Isi respons ialah aliran yang hanya boleh digunakan sekali. Memanggil json() kemudian text() pada respons yang sama akan mencetuskan ralat. Gandakan dengan response.clone() jika Anda benar-benar memerlukan kedua-duanya.
Parameter Pertanyaan
Bina rentetan pertanyaan dengan selamat menggunakan URLSearchParams dan bukannya menggabungkannya secara manual. Ia mengekod aksara khas untuk Anda.
const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);Menghantar Pengepala
Berikan hujah kedua yang mengandungi pilihan. Untuk GET, Anda biasanya menetapkan pengepala Accept atau token pengesahan.
fetch(url, {
headers: {
"Accept": "application/json",
"Authorization": "Bearer " + token
}
});Mengembalikan Promise
Bungkus logik pengambilan dalam fungsi yang mengembalikan Promise supaya pemanggil boleh menunggunya. Ini memastikan pemuatan data boleh digunakan semula di seluruh aplikasi Anda.
function loadUser(id) {
return fetch("/api/users/" + id).then((r) => r.json());
}Semakan Pantas
Permintaan GET dengan API pengambilan.
Ringkasan
fetch(url) mengembalikan Promise untuk Response. Baca isi dengan json(), text() atau blob() (sekali sahaja). Gunakan async/await demi kejelasan, URLSearchParams untuk rentetan pertanyaan dan objek pilihan untuk pengepala. Bungkusnya dalam fungsi yang mengembalikan Promise supaya boleh digunakan semula.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 59
- Pelajaran
- 200
Soalan Lazim
Adakah pelajaran “Membuat Permintaan GET” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Membuat Permintaan GET”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Membuat Permintaan GET”?
Dapatkan data dan huraikan respons JSON. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Membuat Permintaan GET” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?
Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Membuat Permintaan GET
- POST dan Penghantaran Data
- Mengendalikan Error dan Kod Status
- Membatalkan Permintaan dengan AbortController