Cara Menggunakan JavaScript Fetch API untuk Mengambil Data JSON

fetch() adalah fungsi bawaan browser modern untuk mengambil data dari server, biasanya dalam format JSON. Sejak dukungan async/await meluas, cara memakainya jauh lebih ringkas dibanding gaya .then() berantai di masa lalu.

Penggunaan Dasar dengan async/await

async function ambilData() {
  const respons = await fetch("https://api.contoh.com/produk");
  const data = await respons.json();
  console.log(data);
}

ambilData();

fetch() mengembalikan sebuah Promise yang resolve menjadi objek respons; method .json() diperlukan untuk mengubah body respons menjadi objek JavaScript biasa.

Menangani Error dengan Benar

Bagian yang sering terlewat: fetch() tidak otomatis melempar error untuk status HTTP seperti 404 atau 500. Status tersebut harus dicek manual lewat respons.ok.

async function ambilData() {
  try {
    const respons = await fetch("https://api.contoh.com/produk");

    if (!respons.ok) {
      throw new Error(`Gagal mengambil data: ${respons.status}`);
    }

    const data = await respons.json();
    return data;
  } catch (error) {
    console.error("Terjadi kesalahan:", error.message);
  }
}

Mengirim Data dengan Method POST

async function buatProduk(produkBaru) {
  const respons = await fetch("https://api.contoh.com/produk", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(produkBaru),
  });

  return respons.json();
}

buatProduk({ nama: "Meja Kayu", harga: 350000 });

Mengambil Beberapa Data Sekaligus

async function ambilSemuaData() {
  const [produk, kategori] = await Promise.all([
    fetch("/api/produk").then((r) => r.json()),
    fetch("/api/kategori").then((r) => r.json()),
  ]);

  return { produk, kategori };
}

Promise.all() menjalankan beberapa permintaan sekaligus secara paralel, jauh lebih cepat dibanding mengambil data satu per satu secara berurutan.

Membatalkan Permintaan dengan AbortController

const controller = new AbortController();

fetch("https://api.contoh.com/produk", { signal: controller.signal })
  .then((r) => r.json())
  .catch((err) => {
    if (err.name === "AbortError") console.log("Permintaan dibatalkan");
  });

// Membatalkan permintaan, misalnya saat pengguna berpindah halaman
controller.abort();

Kesimpulan

fetch() yang dipadukan dengan async/await adalah cara standar mengambil data JSON di JavaScript modern. Yang paling sering terlewat oleh pemula: selalu cek respons.ok secara manual, karena status error HTTP tidak otomatis dianggap gagal oleh fetch().

Cara Menggunakan JavaScript Fetch API untuk Mengambil Data JSON.