Cara Terhubung ke API dengan JavaScript.

Sebagian besar aplikasi modern tidak berdiri sendiri — mereka mengambil dan mengirim data ke API eksternal. Berikut alur umum menghubungkan JavaScript ke sebuah API dari awal sampai siap dipakai.

Membaca Dokumentasi API Terlebih Dahulu

Sebelum menulis kode, penting memahami tiga hal dari dokumentasi API: base URL, format autentikasi yang dipakai, dan struktur data yang dikembalikan. Melewatkan langkah ini biasanya berujung pada banyak percobaan trial-and-error yang sebenarnya bisa dihindari.

Permintaan Dasar dengan API Key

const API_KEY = "kunci-rahasia-kamu";

async function ambilCuaca(kota) {
  const respons = await fetch(
    `https://api.cuaca.com/data?kota=${kota}&key=${API_KEY}`
  );
  return respons.json();
}

API key sebaiknya tidak pernah ditulis langsung di kode frontend yang bisa dilihat publik. Untuk aplikasi produksi, permintaan yang butuh API key rahasia idealnya diproses lewat server perantara (backend), bukan langsung dari browser pengguna.

Autentikasi dengan Bearer Token

async function ambilProfil(token) {
  const respons = await fetch("https://api.contoh.com/profil", {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  if (!respons.ok) {
    throw new Error("Gagal mengambil profil");
  }

  return respons.json();
}

Pola Authorization: Bearer <token> adalah standar umum untuk API yang butuh autentikasi, di mana token biasanya didapat lewat proses login terpisah.

Menangani Rate Limit

Banyak API membatasi jumlah permintaan dalam periode waktu tertentu. Respons biasanya memberi kode status 429 Too Many Requests saat batas terlampaui.

async function ambilDenganRetry(url, percobaanMaksimal = 3) {
  for (let i = 0; i < percobaanMaksimal; i++) {
    const respons = await fetch(url);

    if (respons.status !== 429) {
      return respons.json();
    }

    await new Promise((resolve) => setTimeout(resolve, 1000 * (i + 1)));
  }

  throw new Error("Melebihi batas percobaan karena rate limit");
}

Memvalidasi Data Sebelum Dipakai

async function ambilProdukAman(id) {
  const respons = await fetch(`/api/produk/${id}`);
  const data = await respons.json();

  if (!data || typeof data.harga !== "number") {
    throw new Error("Format data produk tidak sesuai harapan");
  }

  return data;
}

API eksternal sewaktu-waktu bisa mengubah struktur responsnya tanpa pemberitahuan, sehingga validasi sederhana membantu menangkap masalah lebih awal, bukan menyebabkan error di bagian kode yang jauh dari sumbernya.

Kesimpulan

Menghubungkan JavaScript ke API melibatkan lebih dari sekadar memanggil fetch() — perlu memperhatikan cara autentikasi, potensi rate limit, dan validasi struktur data yang diterima. Kebiasaan menangani error dan kegagalan jaringan sejak awal akan membuat aplikasi jauh lebih tangguh dibanding hanya menangani skenario “jalur bahagia” saja.