Membuat Panggilan API Pertama
Dapatkan data daripada perkhidmatan.
Membuat Panggilan API Pertama ialah pelajaran Pengekodan Vibe percuma di CoddyKit. Ini ialah pelajaran 3 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 Pengekodan Vibe, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.
Daripada Membaca kepada Melakukan
Anda telah membaca dokumentasi; kini anda akan menghantar permintaan sebenar. Matlamat pelajaran ini ialah membuat satu panggilan yang berjaya untuk membawa data langsung ke dalam aplikasi anda.
Kita akan memilih API yang ringkas dan percuma, membina permintaan, menghantarnya dan membaca respons, sambil menggunakan pembantu AI anda untuk menulis serta menyahpepijat kod.
Pilih API yang Mudah Digunakan
Untuk panggilan pertama, pilih API yang tidak memerlukan pendaftaran dan mempunyai titik akhir GET yang jelas. Perkhidmatan awam untuk jenaka, petikan atau cuaca awam ialah tempat latihan yang sesuai.
Memulakan dengan mudah menghapuskan gangguan pengesahan dan pengebilan supaya anda boleh menumpukan perhatian pada aliran permintaan dan respons itu sendiri.
Recommend one free, no-key API with a simple GET endpoint I can use
to practice my very first API call. Give me the exact URL.Anatomi Permintaan
Permintaan GET asas hanya memerlukan URL dan kaedah. Pengepala serta parameter pertanyaan pilihan boleh memperincikannya. Kebanyakan panggilan pertama hanyalah satu baris kod.
Minta pembantu anda menulis baris itu dalam bahasa anda dan menerangkan setiap bahagiannya, supaya anda memahami perkara yang dihantar dan bukannya menyalin secara membuta tuli.
Write a single fetch GET request in JavaScript to this URL and
explain what each part of the line does.Menghantar dengan fetch
Dalam JavaScript, fetch menghantar permintaan dan mengembalikan janji. Anda menunggu respons, kemudian memanggil response.json() untuk mendapatkan data yang dihuraikan.
Corak dua langkah ini, iaitu fetch kemudian huraikan, menjadi asas hampir setiap penyepaduan berasaskan pelayar yang akan anda bina dengan pembantu.
Show me a complete async function using fetch that calls this URL,
awaits the response, parses the JSON, and logs the result.Membaca Respons
Respons yang dihuraikan biasanya ialah objek JSON. Anda mengaksesnya menggunakan kunci, seperti data.results[0].name, untuk mendapatkan nilai yang dikehendaki.
Jika strukturnya mengelirukan, tampalkan respons sebenar kepada pembantu anda dan minta laluan tepat ke medan yang diperlukan.
Here is the JSON my call returned. Give me the exact path to read
the author's name and the quote text.Menambah Parameter Pertanyaan
Parameter pertanyaan diletakkan selepas tanda soal dalam URL, seperti ?city=Paris&units=metric. Parameter ini menapis atau membentuk perkara yang dikembalikan oleh titik akhir.
Binalah dengan teliti kerana kesilapan taip boleh menghasilkan data yang salah atau kosong. Pembantu anda boleh membina URL berparameter daripada input anda dengan tepat.
Build the full URL for this endpoint with query parameters for
city Istanbul and metric units, then write the fetch call.Menghantar Pengepala
Sesetengah titik akhir memerlukan pengepala, seperti Accept: application/json atau jenis kandungan. Pengepala dihantar bersama permintaan sebagai metadata, berasingan daripada URL.
Apabila dokumentasi menyebut pengepala yang diperlukan, minta pembantu anda memasukkannya ke dalam objek pilihan fetch supaya panggilan diterima.
Add an Accept: application/json header to this fetch request and
show me the full updated code.Mencatat untuk Melihat Hasil
Sebelum menyambungkan data kepada UI anda, catat respons ke konsol. Melihat objek mentah mengesahkan bahawa panggilan berjaya dan mendedahkan nama medan sebenar.
Amalan ini mengesan kejutan lebih awal. Banyak pepijat penyepaduan sebenarnya berpunca daripada nama medan yang berbeza daripada yang dinyatakan dalam dokumentasi.
Memaparkan Data pada Skrin
Setelah anda memperoleh data, langkah terakhir ialah memaparkannya. Tetapkan nilai yang dihuraikan kepada pemboleh ubah yang dipaparkan oleh paparan anda, seperti label teks atau item senarai.
Terangkan UI yang anda mahukan kepada pembantu bersama bentuk respons, dan biarkan pembantu menjana kod paparan untuk rangka kerja anda.
I have this JSON response. Render the quote and author inside a
simple card component on my page.Apabila Panggilan Gagal
Jika panggilan pertama anda gagal, semak kod status dan ejaan URL. 404 bermaksud titik akhir yang salah, 401 bermaksud pengesahan tiada, manakala kesilapan taip boleh menghasilkan data kosong.
Tampalkan ralat tepat dan kod anda kepada pembantu. Dengan kedua-duanya, pembantu biasanya dapat mengenal pasti pembaikan dalam satu jawapan.
My fetch returned this error and status code. Here is my code.
What is wrong and how do I fix it?Raikan dan Umumkan
Panggilan pertama yang berfungsi ialah satu pencapaian. Corak yang sama, iaitu bina URL, fetch, huraikan dan paparkan, terpakai pada hampir setiap API yang akan anda gunakan.
Setelah satu panggilan berjaya, menukar kepada titik akhir baharu biasanya hanya memerlukan perubahan pada URL dan medan yang dibaca. Kemahiran ini boleh digunakan terus dalam situasi lain.
Semakan Pantas
Uji pemahaman anda tentang membuat panggilan API pertama.
Ringkasan
Anda memilih API yang ringkas, membina permintaan dengan parameter dan pengepala pilihan, menghantarnya dengan fetch, menghuraikan JSON, mencatatnya dan memaparkan hasilnya.
Kegagalan dikenal pasti melalui kod status dan dibaiki dengan bantuan pembantu anda. Seterusnya, anda akan mengendalikan kunci API dengan selamat dan menangani ralat dengan baik.
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
- 25
- Pelajaran
- 100
Soalan Lazim
Adakah pelajaran “Membuat Panggilan API Pertama” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pengekodan Vibe, termasuk “Membuat Panggilan API Pertama”, 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 Pengekodan Vibe merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Membuat Panggilan API Pertama”?
Dapatkan data daripada perkhidmatan. Anda berlatih Pengekodan Vibe 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 Pengekodan Vibe?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengekodan Vibe 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 3 daripada 4.
Berapa lamakah pelajaran “Membuat Panggilan API Pertama” 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 Pengekodan Vibe ini?
Ya. Setiap pelajaran Pengekodan Vibe 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
- Apakah API
- Membaca Dokumentasi API dengan Kecerdasan Buatan
- Membuat Panggilan API Pertama
- Mengendalikan Kunci dan Ralat