fetch() adalah fungsi bawaan JavaScript untuk mengambil (dan mengirim) data lewat jaringan, misalnya memanggil sebuah API dan menerima balasannya sebagai JSON. Setiap kali kamu melihat data muncul di halaman tanpa reload, daftar produk, komentar, cuaca hari ini, hampir pasti ada fetch() yang bekerja di baliknya. Yang penting dipahami sejak awal: fetch() tidak langsung memberimu datanya, melainkan sebuah Promise, janji bahwa datanya akan datang nanti. Karena itulah fetch selalu ditangani secara async.

Di panduan ini kamu akan belajar fetch dari nol: kenapa fetch(url) mengembalikan Promise, pola dua langkah .then(res => res.json()), cara mengecek res.ok dan res.status, menangani error jaringan dengan .catch(), versi async/await yang lebih rapi, sampai bedanya melakukan GET dan POST. Semua dengan contoh berbahasa Indonesia yang bisa langsung kamu coba di console browser.

Apa Itu `fetch()` dan Kenapa Ia Mengembalikan Promise

fetch() adalah cara modern JavaScript melakukan HTTP request, mengirim permintaan ke sebuah alamat (URL) dan menunggu balasan dari server. Bentuk paling sederhananya cuma butuh satu argumen: URL yang ingin kamu panggil.

fetch("https://api.example.com/users")

Masalahnya, mengambil data dari internet itu butuh waktu, bisa puluhan milidetik, bisa beberapa detik kalau koneksi lambat. Karena JavaScript single-threaded (mengerjakan satu hal dalam satu waktu), ia tidak boleh berhenti dan membeku menunggu balasan. Solusinya: fetch() langsung mengembalikan sebuah Promise, sebuah “struk” yang berkata “permintaanmu sedang diproses, hasilnya menyusul”. Program lanjut jalan, dan begitu balasan datang, kode penanganmu baru dijalankan.

Pola Dua Langkah: `.then(res => res.json())`

Inilah bagian yang paling sering membingungkan pemula: kenapa mengambil data butuh dua .then()? Jawabannya karena ada dua hal berbeda yang harus ditunggu.

Langkah pertama, fetch() selesai dan memberimu sebuah objek Response. Tapi objek ini belum berisi data yang bisa kamu pakai, ia baru berisi metadata (status, header) dan sebuah “aliran” data mentah yang belum dibaca. Untuk mengubah body-nya menjadi object JavaScript, kamu memanggil res.json():

fetch("https://api.example.com/users")
  .then((res) => res.json())    // langkah 1: Response → parse body jadi object
  .then((data) => console.log(data))  // langkah 2: baru data-nya bisa dipakai

Membacanya begini: .then() pertama menerima Response dan mengubahnya jadi JSON. .then() kedua menerima data hasil parse dan menampilkannya. Dua langkah, dua Promise yang harus diselesaikan berurutan.

Mengecek `res.ok` dan `res.status`

Sekarang jebakan besar yang sering menjatuhkan pemula: fetch() menganggap response 404 atau 500 sebagai “berhasil”. Bagi fetch, selama server menjawab, apa pun isi jawabannya, Promise-nya dianggap fulfilled, bukan rejected. fetch hanya menolak (reject) kalau permintaannya sama sekali tidak sampai: koneksi putus, server tak terjangkau, atau domain salah.

Artinya kamu harus mengecek sendiri apakah responsnya benar-benar sukses, lewat properti res.ok (bernilai true untuk status 200-299) atau res.status (kode angkanya):

fetch("https://api.example.com/users")
  .then((res) => {
    if (!res.ok) {
      throw new Error(`Server membalas status ${res.status}`)
    }
    return res.json()
  })
  .then((data) => console.log(data))
  .catch((err) => console.error("Ada masalah:", err))

Dengan throw di dalam .then(), error itu “meluncur” ke .catch() di ujung rantai, sehingga status 404/500 pun ikut tertangani seperti error biasa.

Menangani Error dengan `.catch()`

Setiap rantai fetch wajib ditutup dengan .catch(). Inilah yang berjalan ketika ada kegagalan jaringan, atau ketika kamu sendiri throw sebuah error karena res.ok bernilai false. Tanpa .catch(), error akan tertelan diam-diam sebagai unhandled rejection dan aplikasimu berperilaku aneh tanpa pesan jelas.

fetch("https://api.example.com/users")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error("Gagal mengambil data:", err))

Coba lihat sendiri bagaimana satu request fetch bergerak dari loading ke sukses atau gagal. Di playground di bawah, pilih dulu kamu ingin request berikutnya berakhir Sukses atau Gagal, lalu tekan Kirim fetch() dan perhatikan jalur kode mana yang menyala, .then() untuk sukses, .catch() untuk error.

Coba Sendiri

Siap

Pilih hasil (Sukses / Gagal), lalu tekan Kirim fetch() untuk melihat siklus request-nya.

Jalur kode

fetch(url)

.then(res => res.json()) // ← jalur sukses

.catch(err => ...) // ← jalur error

Setelah bermain dengan playground di atas, kamu bisa mendalami pola yang sama dengan latihan bertahap lewat pelajaran fetch & promises di Hyper Sheets yang bisa langsung dikerjakan di browser tanpa setup apa pun.

`.then()` Chain vs `async`/`await`: Fetch yang Sama, Dua Gaya

Ada dua cara menulis fetch yang sama persis. Gaya lama memakai rantai .then(); gaya modern memakai async/await yang membuat kode async terbaca seperti kode biasa dari atas ke bawah. Keduanya menghasilkan hal identik, pilih yang paling nyaman kamu baca.

// Gaya .then(), rantai Promise
fetch("https://api.example.com/users")
  .then((res) => {
    if (!res.ok) throw new Error(`Status ${res.status}`)
    return res.json()
  })
  .then((data) => console.log(data))
  .catch((err) => console.error(err))

// Gaya async/await, hasil identik, terbaca baris demi baris
async function ambilUsers() {
  try {
    const res = await fetch("https://api.example.com/users")
    if (!res.ok) throw new Error(`Status ${res.status}`)
    const data = await res.json()
    console.log(data)
  } catch (err) {
    console.error(err)
  }
}

Perbandingan singkatnya:

Aspek	Gaya `.then()`	Gaya `async`/`await`
Bentuk	Rantai `.then().then().catch()`	Baris demi baris dengan `await`
Keterbacaan	Sedang	Terbaik (seperti kode sinkron)
Menunggu hasil	Otomatis lewat rantai	Eksplisit dengan `await`
Menangani error	`.catch()` di ujung	`try/catch` biasa
Cek `res.ok`	`throw` di dalam `.then()`	`throw` biasa di dalam `try`

Sekilas GET vs POST dengan `fetch`

Secara default, fetch(url) melakukan request GET, yaitu mengambil data. Kamu tidak perlu menulis apa-apa selain URL-nya. Tapi kalau kamu ingin mengirim data ke server (misalnya membuat user baru atau menyimpan form), kamu butuh request POST, dan itu memerlukan argumen kedua berisi method, headers, dan body:

// GET, ambil data (default, cukup URL)
fetch("https://api.example.com/users")

// POST, kirim data (butuh method, headers, dan body)
fetch("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ nama: "Budi", email: "[email protected]" }),
})

Perhatikan tiga tambahan pada POST: method: "POST" menentukan jenis request, headers memberi tahu server bahwa body-nya berformat JSON, dan body berisi data yang diubah menjadi teks JSON lewat JSON.stringify(). Untuk pemahaman lengkap kapan memakai masing-masing, baca perbedaan GET vs POST.

Kesalahan Umum Pemula soal `fetch`

Beberapa jebakan yang hampir selalu dialami saat pertama kali memakai fetch:

1. Lupa res.json() dan langsung memakai response. Objek Response bukan datamu, kamu harus mem-parse body-nya dulu dengan res.json() (yang juga mengembalikan Promise).

2. Mengira 404/500 akan masuk .catch(). Tidak. fetch hanya reject saat gagal jaringan. Selalu cek res.ok sendiri.

3. Lupa await (atau .then()). Tanpa menunggu, kamu memegang Promise-nya, bukan datanya, sering muncul [object Promise] alih-alih data yang diharapkan.

4. Lupa memasang .catch() atau try/catch. Error jaringan jadi tertelan diam-diam dan sulit di-debug.

5. Lupa JSON.stringify() dan header pada POST. Body harus berupa teks JSON, dan server perlu tahu formatnya lewat Content-Type: application/json.

Cek Pemahaman

Apa yang sebenarnya dikembalikan oleh fetch(url) saat dipanggil?

FAQ Seputar Fetch API JavaScript

Apa itu `fetch` dengan bahasa sederhana?

fetch adalah fungsi bawaan JavaScript untuk mengambil atau mengirim data lewat jaringan, misalnya memanggil sebuah API dan menerima balasannya. Karena mengambil data butuh waktu, fetch tidak langsung memberimu datanya, melainkan sebuah Promise (semacam struk) yang nanti berisi hasilnya. Kamu menangani hasil itu dengan .then() atau await.

Kenapa `fetch` butuh dua `.then()`?

Karena ada dua operasi async berurutan. .then() pertama menunggu response datang lalu memanggil res.json() untuk mem-parse body-nya, dan res.json() itu sendiri mengembalikan Promise. .then() kedua menunggu proses parse selesai lalu menerima data yang siap dipakai. Jadi polanya .then(res => res.json()).then(data => ...).

Apakah `fetch` error kalau statusnya 404?

Tidak. Ini kejutan yang sering menjatuhkan pemula: fetch menganggap 404 dan 500 sebagai response yang “berhasil” karena server tetap menjawab. .catch() hanya berjalan saat ada kegagalan jaringan (koneksi putus, server tak terjangkau). Untuk menangani 404/500, kamu harus mengecek res.ok atau res.status sendiri lalu throw error kalau tidak sukses.

Lebih baik pakai `.then()` atau `async/await` untuk `fetch`?

Keduanya sah dan menghasilkan hal yang sama; async/await sebenarnya dibangun di atas Promise yang sama. Untuk kode sederhana keduanya sama enaknya, tapi begitu ada beberapa langkah berurutan, async/await umumnya lebih mudah dibaca karena terlihat seperti kode biasa dari atas ke bawah. Pelajari selengkapnya di panduan async/await.

Setelah Fetch, Belajar Apa?

Setelah nyaman mengambil data dengan fetch, berikut jalur lanjutan yang masuk akal:

Promise, fondasi di balik fetch. Kalau bagian Promise di atas masih terasa kabur, mantapkan dulu lewat Promise JavaScript adalah beserta tiga state-nya.
async/await, cara modern menulis fetch agar terbaca seperti kode biasa. Ini langkah wajib berikutnya; mulai dari panduan async/await.
GET vs POST dan REST API, memahami jenis-jenis request dan kapan memakainya lewat perbedaan GET vs POST.
Error handling lanjutan, membuat pesan error ramah pengguna, indikator loading, dan mekanisme retry otomatis.

fetch adalah keterampilan yang membuka pintu ke hampir semua aplikasi web nyata, karena hampir setiap aplikasi perlu berbicara dengan server. Kalau fondasi async-mu masih goyah, ada baiknya mengulang dulu panduan JavaScript dari nol sebelum menyelam lebih dalam. Kuasai pola dua langkah dan kebiasaan mengecek res.ok pelan-pelan, banyak praktik langsung di console browser, dan jangan takut membaca pesan error.

Siap praktik langsung? Kerjakan pelajaran fetch & promises interaktif di Hyper Sheets yang membimbingmu menangani fetch dan Promise sungguhan langkah demi langkah, langsung di browser tanpa perlu setup apa pun.

Apa Itu fetch() dan Kenapa Ia Mengembalikan Promise

Pola Dua Langkah: .then(res => res.json())

Mengecek res.ok dan res.status

Menangani Error dengan .catch()

.then() Chain vs async/await: Fetch yang Sama, Dua Gaya

Sekilas GET vs POST dengan fetch

Kesalahan Umum Pemula soal fetch