Cara Menghubungkan API ke Website dengan JavaScript

API memungkinkan website berkomunikasi dengan layanan atau aplikasi lain.

Dengan JavaScript, kita dapat mengambil data dari API lalu menampilkannya pada halaman tanpa harus menulis seluruh data secara manual.

Apa Itu API?

API adalah interface yang memungkinkan dua sistem bertukar data atau menjalankan fungsi tertentu melalui aturan yang sudah ditentukan.

Contoh:

Website
↓
Request API
↓
Server API
↓
Response JSON
↓
Website menampilkan data

Apa Itu JSON?

Banyak API web mengembalikan data dalam format JSON.

{
  "name": "Budi",
  "level": "Pemula"
}

JavaScript dapat mengubah response JSON menjadi object yang mudah digunakan.

fetch()

Browser menyediakan API fetch() untuk melakukan HTTP request.

Contoh:

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

Memeriksa HTTP Status

fetch() tidak otomatis menganggap semua response HTTP error sebagai rejected promise.

Karena itu, periksa response.ok.

fetch("https://api.example.com/data")
    .then((response) => {
        if (!response.ok) {
            throw new Error(
                "HTTP error: " + response.status
            );
        }

        return response.json();
    })
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

Menggunakan async dan await

async function ambilData() {
    try {
        const response = await fetch(
            "https://api.example.com/data"
        );

        if (!response.ok) {
            throw new Error(
                "HTTP error: " + response.status
            );
        }

        const data = await response.json();

        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

ambilData();

Menampilkan Data ke HTML

HTML:

<button id="load">Ambil Data</button>
<p id="hasil"></p>

JavaScript:

const tombol = document.getElementById("load");
const hasil = document.getElementById("hasil");

tombol.addEventListener("click", async function () {
    hasil.textContent = "Loading...";

    try {
        const response = await fetch(
            "https://api.example.com/data"
        );

        if (!response.ok) {
            throw new Error("Request gagal.");
        }

        const data = await response.json();

        hasil.textContent = data.name;
    } catch (error) {
        hasil.textContent = "Gagal mengambil data.";
    }
});

Loading State

Request jaringan tidak selalu selesai seketika.

Tampilkan status agar pengguna mengetahui bahwa proses sedang berjalan.

hasil.textContent = "Loading...";

Error State

Jangan membiarkan halaman kosong jika request gagal.

Berikan pesan yang mudah dipahami:

hasil.textContent =
    "Data belum dapat dimuat. Coba lagi.";

GET Request

GET digunakan untuk mengambil resource.

const response = await fetch(
    "https://api.example.com/articles"
);

POST Request

Contoh JSON POST:

const response = await fetch(
    "https://api.example.com/articles",
    {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            title: "Belajar API"
        })
    }
);

Jangan Menaruh Secret API Key di Frontend

JavaScript browser dikirim kepada pengguna. Artinya source dan request dapat diperiksa melalui Developer Tools.

Jika API membutuhkan secret key yang benar-benar rahasia, jangan menaruh key tersebut di:

script.js
HTML
localStorage
repository publik

Gunakan backend sebagai perantara jika credential tidak boleh diketahui client.

Arsitektur dengan Backend

Browser
↓
Backend kita
↓
API eksternal
↓
Backend kita
↓
Browser

Backend dapat menyimpan secret, melakukan validasi, rate limiting, dan menentukan data apa yang boleh dikirim ke client.

Apa Itu CORS?

CORS adalah mekanisme browser yang mengatur apakah halaman dari satu origin diizinkan membaca response dari origin lain.

Jika muncul error CORS, solusi bukan sekadar menonaktifkan keamanan browser.

API harus memberikan header CORS yang sesuai atau request perlu dilakukan melalui backend yang memiliki izin akses yang benar.

Jangan Menggunakan Proxy Publik Sembarangan

Proxy gratis yang tidak dipercaya dapat melihat data request dan response.

Untuk project serius, buat backend sendiri atau gunakan layanan yang jelas kebijakan dan keamanannya.

Query Parameter

Gunakan URLSearchParams untuk membangun parameter dengan lebih aman.

const params = new URLSearchParams({
    q: "javascript",
    page: "1"
});

const url =
    "https://api.example.com/search?"
    + params.toString();

Timeout Request

Request dapat menggantung terlalu lama.

JavaScript modern dapat menggunakan AbortController untuk membatalkan request.

const controller = new AbortController();

const timeout = setTimeout(() => {
    controller.abort();
}, 10000);

try {
    const response = await fetch(
        "https://api.example.com/data",
        {
            signal: controller.signal
        }
    );

    clearTimeout(timeout);

    if (!response.ok) {
        throw new Error("Request gagal");
    }
} catch (error) {
    clearTimeout(timeout);
}

Render Data dengan Aman

Jika data API ditampilkan sebagai teks, gunakan textContent daripada memasukkan data tidak dipercaya langsung dengan innerHTML.

judul.textContent = data.title;

Mengambil Daftar Data

const response = await fetch(
    "https://api.example.com/articles"
);

if (!response.ok) {
    throw new Error("Gagal mengambil artikel.");
}

const articles = await response.json();

articles.forEach((article) => {
    const item = document.createElement("li");

    item.textContent = article.title;

    list.appendChild(item);
});

API Rate Limit

Banyak API memiliki batas jumlah request.

Jangan memanggil API pada setiap keystroke tanpa debounce atau strategi yang sesuai.

Kesalahan Umum Pemula

• Tidak memeriksa response.ok.
• Tidak membuat loading dan error state.
• Menyimpan secret key di frontend.
• Menggunakan innerHTML untuk data tidak dipercaya.
• Mengabaikan CORS.
• Membuat request terlalu banyak.

Kesimpulan

JavaScript dapat menghubungkan website dengan API menggunakan fetch(). Gunakan async/await, periksa HTTP status, tangani error, dan tampilkan loading state.

Jika API menggunakan credential rahasia, pindahkan request sensitif ke backend.

Materi terakhir pada target Content Engine awal adalah cara menggunakan AI untuk membantu belajar coding.