JavaScript Academy · Pelajaran

Membuat Permintaan GET

Ambil data dan uraikan respons JSON.

Membuat Permintaan GET adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Fungsi Pengambilan Data

API Pengambilan Data membuat permintaan HTTP dari peramban dan mengembalikan sebuah Promise. API ini merupakan pengganti modern untuk XMLHttpRequest yang lama.

GET Dasar

Panggil fetch(url) dengan sebuah URL. Secara bawaan, fungsi ini menggunakan metode GET dan menyelesaikan dengan objek Response.

fetch("https://api.example.com/users")
  .then((response) => {
    console.log(response.status); // 200
  });

Objek Response

Nilai yang diselesaikan adalah Response, bukan datanya sendiri. Nilai ini memuat status, header, dan metode untuk membaca isi. Anda harus memanggil metode isi untuk mendapatkan kontennya.

fetch(url).then((response) => {
  console.log(response.ok);     // true if status 200-299
  console.log(response.status); // 200
});

Mengurai JSON

Sebagian besar API mengembalikan JSON. Panggil response.json(), yang juga mengembalikan sebuah Promise yang diselesaikan menjadi objek hasil penguraian.

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data); // parsed JS object/array
  });

Mengapa Ada Dua Promise

Promise pertama diselesaikan saat header tiba; Promise kedua (.json()) diselesaikan saat seluruh isi telah diunduh dan diurai. Itulah sebabnya Anda merangkai dua pemanggilan .then().

Menggunakan async/await

Sebagian besar kode menggunakan async/await agar lebih mudah dibaca. Setiap await menjeda eksekusi hingga Promise-nya diselesaikan.

async function getUsers() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

Pembaca Isi Lainnya

Selain json(), sebuah Response dapat dibaca sebagai text(), blob() (biner), arrayBuffer(), atau formData(). Pilih berdasarkan data yang dikembalikan server.

const response = await fetch(url);
const html = await response.text(); // raw string

Isi Hanya Dibaca Sekali

Isi respons adalah aliran yang hanya dapat Anda konsumsi sekali. Memanggil json() lalu text() pada respons yang sama akan menimbulkan kesalahan. Klon dengan response.clone() jika Anda benar-benar memerlukan keduanya.

Parameter Kueri

Buat string kueri dengan aman menggunakan URLSearchParams, bukan dengan menggabungkannya secara manual. Fungsi ini menyandikan karakter khusus untuk Anda.

const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);

Mengirimkan Header

Teruskan argumen kedua yang berisi opsi. Untuk GET, Anda biasanya menetapkan header Accept atau token autentikasi.

fetch(url, {
  headers: {
    "Accept": "application/json",
    "Authorization": "Bearer " + token
  }
});

Mengembalikan Promise

Bungkus logika fetch dalam fungsi yang mengembalikan Promise agar pemanggil dapat menunggunya dengan await. Dengan demikian, pemuatan data dapat digunakan kembali di seluruh aplikasi Anda.

function loadUser(id) {
  return fetch("/api/users/" + id).then((r) => r.json());
}

Pemeriksaan Singkat

Permintaan GET dengan fetch.

Ringkasan

fetch(url) mengembalikan Promise untuk sebuah Response. Baca isinya dengan json(), text(), atau blob() (hanya sekali). Gunakan async/await agar lebih jelas, URLSearchParams untuk string kueri, dan objek opsi untuk header. Bungkus logika tersebut dalam fungsi yang mengembalikan Promise agar dapat digunakan kembali.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat Permintaan GET” gratis?

Ya — teks lengkap “Membuat Permintaan GET” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuat Permintaan GET”?

Ambil data dan uraikan respons JSON. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Membuat Permintaan GET” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Membuat Permintaan GET
POST dan Mengirim Data
Menangani Error dan Kode Status
Membatalkan Permintaan dengan AbortController

← Kembali ke JavaScript Academy