Fetch API JavaScript: Request, JSON, dan Penanganan Error

Fetch Adalah HTTP Client Berbasis Promise

fetch sudah tersedia di browser dan Node modern. Kamu memberinya URL, dan ia mengembalikan Promise yang menghasilkan objek Response. Pada intinya, itulah seluruh API-nya:

fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error("failed:", err));

Ada dua panggilan .then karena ada dua langkah asynchronous: pertama header response tiba (itulah hasil promise pertama), lalu body-nya dibaca dan di-parse (response.json() sendiri juga promise). Body-nya baru diunduh saat kamu memintanya.

Alur yang sama dengan async/await terbaca seperti kode biasa dari atas ke bawah:

async function loadTodo() {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log(data);
}

loadTodo();

Dua await, dua titik jeda. Pekerjaannya sama, urutan bacanya lebih jelas.

Objek Response

Yang kamu terima bukan body-nya, melainkan objek Response berisi metadata dan method untuk membaca body dalam berbagai bentuk:

async function inspect() {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");

    console.log(response.status);       // 200
    console.log(response.ok);           // true for 200-299
    console.log(response.headers.get("content-type"));

    const data = await response.json();
    console.log(data.title);
}

inspect();

Kamu bisa membaca body sebagai .json(), .text(), .blob(), .arrayBuffer(), atau .formData(). Masing-masing mengembalikan promise. Body hanya bisa dibaca sekali: panggil .json() dua kali pada response yang sama, maka panggilan kedua akan memunculkan error.

Jebakan Besar: Error HTTP Tidak Ditolak

Ini menjebak hampir semua orang yang baru mengenal fetch. Response 404 atau 500 bukan penolakan. Promise-nya selesai seperti biasa, dengan response.ok === false. Fetch hanya ditolak saat request itu sendiri tidak bisa diselesaikan, misalnya DNS gagal, tidak ada jaringan, atau diblokir CORS.

Artinya, fetch yang naif akan dengan senang hati memberimu halaman error lalu crash di .json() belakangan:

async function buggy() {
    // This URL returns 404, but fetch resolves anyway.
    const response = await fetch("https://jsonplaceholder.typicode.com/nope/999");
    const data = await response.json();    // might explode or return garbage
    console.log(data);
}

buggy();

Solusinya, cek response.ok sendiri dan lempar error kalau server mengembalikan status error:

async function loadTodo(id) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);

    if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    return response.json();
}

loadTodo(1).then(console.log).catch(err => console.error(err.message));

Biasakan menulis blok if (!response.ok) itu. Blok ini wajib ada di setiap wrapper fetch yang kamu tulis.

Mengirim Request POST

GET adalah default-nya. Untuk yang lain, berikan argumen kedua berupa objek options:

async function createPost() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            title: "hello",
            body: "from fetch",
            userId: 1
        })
    });

    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    console.log(data);
}

createPost();

Tiga hal yang perlu dicatat:

• method default-nya "GET". Atur secara eksplisit untuk POST, PUT, DELETE, PATCH.
• body menerima string (atau FormData, Blob, dan sejenisnya). Fetch tidak akan melakukan serialisasi objek untukmu, jadi JSON.stringify(...) adalah tugasmu.
• Header Content-Type memberi tahu server cara mem-parsing body. Kalau lupa, kebanyakan server akan memperlakukan body sebagai teks biasa.

Header, Query String, dan Opsi Lainnya

Header hanyalah sebuah objek (atau instance Headers). Query string kamu susun sendiri, biasanya dengan URLSearchParams:

async function search(query, token) {
    const params = new URLSearchParams({ q: query, limit: "10" });
    const url = `https://api.example.com/search?${params}`;

    const response = await fetch(url, {
        headers: {
            "Authorization": `Bearer ${token}`,
            "Accept": "application/json"
        }
    });

    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
}

URLSearchParams menangani encoding untukmu, seperti spasi, tanda ampersand, dan unicode, jadi URL-mu tidak rusak saat input berisi karakter yang perlu di-escape.

Opsi lain yang akan kamu lihat di kode sungguhan: credentials: "include" untuk mengirim cookie lintas origin, cache: "no-store" untuk melewati cache HTTP, dan mode: "cors" (biasanya default) untuk mengatur perilaku CORS.

Membatalkan Request dengan AbortController

Kadang kamu ingin menyerah, misalnya pengguna mengetik query pencarian baru, atau request-nya terlalu lama. AbortController adalah mekanismenya:

async function loadWithTimeout(url, ms) {
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), ms);

    try {
        const response = await fetch(url, { signal: controller.signal });
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return await response.json();
    } finally {
        clearTimeout(timeout);
    }
}

loadWithTimeout("https://jsonplaceholder.typicode.com/todos/1", 3000)
    .then(console.log)
    .catch(err => console.error(err.name, err.message));

controller.abort() membuat promise fetch ditolak dengan DOMException yang name-nya "AbortError". Blok finally menghapus timeout-nya agar request yang berhasil tidak meninggalkan timer yang menggantung.

Pola ini, yaitu fetch ditambah timeout dan pembersihan, layak dibungkus dalam sebuah helper lalu dipakai ulang di mana-mana.

Wrapper yang Bisa Dipakai Ulang

Gabungkan semuanya, maka kamu mendapat helper kecil yang menangani boilerplate-nya sekali saja:

async function apiRequest(url, options = {}) {
    const response = await fetch(url, {
        headers: { "Content-Type": "application/json", ...options.headers },
        ...options
    });

    if (!response.ok) {
        const text = await response.text();
        throw new Error(`HTTP ${response.status}: ${text || response.statusText}`);
    }

    if (response.status === 204) return null;   // No Content
    return response.json();
}

apiRequest("https://jsonplaceholder.typicode.com/todos/1")
    .then(console.log)
    .catch(err => console.error(err.message));

Satu tempat untuk mengubah header, satu tempat untuk menangani error, satu tempat untuk menangani response kosong. Setiap aplikasi yang tidak sepele pada akhirnya punya sesuatu seperti ini.

Berikutnya: Penanganan Error di Kode Async

Fetch adalah salah satu tempat paling umum munculnya error async, dan pengecekan response.ok hanyalah satu bagian dari teka-tekinya. Halaman berikutnya membahas penanganan error pada promise dan async/await: ke mana error pergi, cara menangkapnya, dan jebakan yang membuatnya lolos diam-diam.