Apa Itu Fetch API?
Fetch API adalah fitur bawaan JavaScript modern yang digunakan untuk melakukan permintaan HTTP secara asynchronous, seperti mengambil data dari server atau mengirim data ke backend. Dibandingkan dengan metode lama seperti XMLHttpRequest, Fetch API menawarkan sintaks yang lebih bersih dan mudah dibaca karena berbasis promise. Hal ini membuatnya lebih efisien dan fleksibel untuk menangani komunikasi data, terutama pada aplikasi web yang dinamis. Fetch API sangat berguna saat Anda ingin memuat data tanpa perlu me-refresh halaman, misalnya saat menampilkan daftar produk, mengirim form, atau mengambil data dari API publik secara real-time.
Cara Kerja Fetch API
Untuk memahami Fetch API secara menyeluruh, penting untuk mengenal bagaimana cara kerjanya dari sisi struktur dasar hingga alur data yang dikembalikan. Berikut penjelasan detail dalam tiga poin utama:
1. Struktur Dasar Berbasis Promise
Fetch API bekerja dengan pendekatan promise-based, artinya saat Anda menggunakan fetch(), fungsi ini tidak langsung mengembalikan hasilnya, melainkan mengembalikan sebuah objek Promise yang mewakili operasi asynchronous. Dengan pendekatan ini, Anda dapat menggunakan method .then() untuk menangani hasil ketika respons sudah diterima, dan .catch() untuk menangani error. Model ini jauh lebih bersih dibanding callback hell yang umum terjadi pada pendekatan lama seperti XMLHttpRequest.
2. Skema Umum Syntax fetch(url, options)
Fungsi fetch() menerima dua parameter utama: url sebagai alamat sumber data yang ingin diakses, dan options sebagai konfigurasi request (seperti method HTTP, headers, dan body). Misalnya, fetch('https://api.example.com/data', { method: 'GET' }) akan mengirim permintaan GET ke API tersebut. Jika Anda ingin mengirim data, Anda bisa menggunakan method POST dan menambahkan header serta body JSON yang relevan. Struktur ini fleksibel dan mudah dikustomisasi sesuai kebutuhan.
3. Alur Request–Response dan Parsing JSON
Setelah fetch() dipanggil dan respons diterima, Anda perlu mengekstrak isi data tersebut—biasanya dalam format JSON. Alur umumnya adalah: Fetch mengirim request ke server → server merespons dengan objek response → Anda perlu memanggil .json() pada response untuk mengubahnya menjadi objek JavaScript yang bisa diproses lebih lanjut. Karena .json() juga mengembalikan promise, proses ini tetap dilakukan secara asynchronous, dan biasanya digabung dengan chaining .then() atau menggunakan async/await untuk penulisan yang lebih bersih.
Dengan memahami struktur promise, sintaks dasar, dan alur kerja Fetch API, Anda dapat lebih mudah mengintegrasikan komunikasi data yang efisien dan modern dalam pengembangan aplikasi web.
Baca juga: Cloud Architect vs DevOps Engineer: Perbedaan dan Kolaborasinya
Metode HTTP yang Didukung
Setelah memahami cara kerja Fetch API, langkah selanjutnya adalah mengenal berbagai metode HTTP yang didukung. Metode-metode ini digunakan untuk menentukan jenis aksi yang ingin dilakukan terhadap sumber daya di server. Berikut penjelasan masing-masing metode yang dapat Anda gunakan bersama Fetch API:
1. GET
Metode GET digunakan untuk mengambil data dari server. Ini adalah metode default saat Anda memanggil fetch() tanpa opsi tambahan. Misalnya, fetch('https://api.example.com/users') akan mengirim permintaan GET untuk mengambil daftar pengguna. Karena tidak membawa body, metode ini cocok untuk pengambilan data yang tidak mengubah apa pun di server.
2. POST
Metode POST digunakan untuk mengirim data baru ke server, seperti saat mengirim form atau menambahkan entri baru. Contoh penggunaan:
Dengan ini, Anda mengirim data dalam format JSON ke server yang biasanya akan menyimpan atau memprosesnya.
3. PUT
Metode PUT dipakai untuk memperbarui seluruh data yang sudah ada di server. Biasanya digunakan untuk mengganti satu entitas secara penuh. Contoh penggunaan:
Permintaan ini akan mengganti data pengguna dengan ID 1 menggunakan data baru yang dikirim.
4. DELETE
Metode DELETE digunakan untuk menghapus data dari server. Contohnya:
Permintaan tersebut akan menghapus data pengguna dengan ID 1 dari server.
Dengan memahami dan menggunakan metode HTTP ini, Anda dapat membangun aplikasi web yang mampu melakukan berbagai interaksi data secara lengkap dan terstruktur menggunakan Fetch API.
Contoh Implementasi Dasar
Setelah memahami berbagai metode HTTP yang dapat digunakan dengan Fetch API, kini saatnya melihat implementasi nyatanya dalam berbagai skenario umum. Berikut ini adalah tiga contoh dasar penggunaan Fetch API dalam pengembangan web:
- Fetch API dengan GET Request ke Public API
Contoh paling sederhana dari penggunaan Fetch API adalah mengambil data dari public API menggunakan metode GET. Misalnya, kita ingin mengambil daftar pengguna dari https://jsonplaceholder.typicode.com/users. Kodenya cukup sederhana:
Kode ini akan mengirim permintaan GET, lalu mengubah respons JSON menjadi objek JavaScript dan menampilkannya di konsol. Ini sangat cocok untuk menampilkan data ke UI secara dinamis.
- Fetch API dengan POST Request dan Body JSON
Untuk mengirim data ke server, misalnya saat user mengisi form pendaftaran, Anda bisa menggunakan Fetch API dengan metode POST. Berikut contoh pengirimannya:
Contoh di atas akan mengirim objek JSON ke server dan mencetak responsnya. Anda dapat menggunakan pendekatan ini untuk registrasi, login, atau menyimpan data baru.
- Menangani Error dan HTTP Status Code
Dalam implementasi nyata, penting untuk menangani error dengan baik. Fetch API tidak secara otomatis menolak promise jika respons server mengembalikan status error seperti 404 atau 500, sehingga Anda perlu memeriksanya secara manual. Contohnya:
Melalui ketiga contoh di atas, Anda sudah memiliki dasar kuat untuk mulai membangun fitur-fitur dinamis berbasis Fetch API di aplikasi web Anda.
Menangani Error dan Response
Dalam penggunaan Fetch API, menangani error dan response adalah langkah penting untuk memastikan aplikasi Anda berjalan stabil. Saat menggunakan .then() dan .catch(), Anda dapat memproses response secara bertahap: .then() digunakan untuk menangani hasil sukses seperti mengubah response menjadi JSON, sedangkan .catch() akan menangkap error jaringan atau error lain yang menyebabkan promise gagal. Alternatif yang lebih modern dan bersih adalah menggunakan async/await, yang memungkinkan Anda menulis kode asynchronous layaknya kode synchronous, sehingga lebih mudah dibaca dan dipelihara.
Namun, penting untuk diingat bahwa Fetch API tidak otomatis menganggap HTTP error (seperti 404 atau 500) sebagai error. Oleh karena itu, Anda harus memeriksa response.ok secara manual. Jika bernilai false, artinya response gagal secara logis meskipun tidak ada error jaringan. Setelah memastikan status OK, Anda bisa melanjutkan dengan response.json() untuk mengubah isi response ke dalam objek JavaScript. Di titik ini, sangat disarankan untuk memvalidasi struktur data hasil parsing agar sesuai dengan ekspektasi aplikasi, sehingga Anda bisa menghindari bug akibat data yang tidak sesuai format.
Fetch API dengan Async/Await
Penggunaan Fetch API dengan async/await memberikan cara yang lebih sederhana dan elegan dalam menangani operasi asynchronous dibandingkan dengan chaining .then(). Dengan async/await, Anda bisa menulis kode seperti alur biasa, membuatnya lebih mudah dipahami, terutama dalam project kecil atau saat Fetch dipanggil berulang kali. Misalnya, alih-alih menulis fetch(url).then(...).catch(...), Anda cukup membuat fungsi async dan menggunakan await untuk menunggu hasil response serta parsing JSON-nya.
Contoh sederhananya: const response = await fetch(url); const data = await response.json();. Pendekatan ini sangat cocok digunakan di dalam fungsi-fungsi yang menangani interaksi data dinamis, seperti menampilkan daftar produk, menangani login, atau mengambil informasi pengguna dari API.
Kelebihan dan Keterbatasan Fetch API
Sebelum mengadopsi Fetch API secara luas dalam proyek Anda, penting untuk memahami kelebihan dan keterbatasannya. Dengan mengenali kedua sisi ini, Anda bisa memanfaatkannya secara optimal sekaligus mengantisipasi potensi masalah yang mungkin muncul.
Kelebihan Fetch API
Fetch API menawarkan sejumlah keunggulan yang membuatnya menjadi standar baru dalam pengambilan data di aplikasi web. Salah satunya adalah sintaks yang lebih sederhana dan bersih karena berbasis promise, sehingga memudahkan developer dalam menulis dan membaca kode asynchronous. Selain itu, Fetch API sudah didukung secara native di sebagian besar browser modern, sehingga Anda tidak perlu mengimpor library tambahan atau menggunakan polyfill untuk kebutuhan dasar pengambilan data. Fleksibilitas dalam pengaturan headers, body, dan method juga menjadikannya pilihan ideal untuk berbagai skenario komunikasi dengan server.
Keterbatasan Fetch API
Meskipun tampak sederhana, Fetch API memiliki satu kekurangan penting: ia tidak secara otomatis menolak promise untuk respons HTTP yang gagal seperti 404 atau 500. Artinya, walaupun server mengembalikan error, promise tetap dianggap berhasil secara teknis, kecuali ada kesalahan jaringan. Hal ini mengharuskan Anda melakukan pengecekan manual terhadap properti response.ok atau response.status setelah request dijalankan. Tanpa penanganan error yang eksplisit, aplikasi bisa saja salah memproses data atau gagal memberikan feedback yang jelas kepada pengguna saat terjadi kesalahan.
Tips dan Best Practices
Saat menggunakan async/await, sangat disarankan untuk selalu membungkus kode Anda dalam blok try/catch. Ini penting karena jika terjadi error — baik karena jaringan putus, respons gagal diparse, atau status server tidak sesuai harapan — Anda bisa menanganinya dengan elegan tanpa membuat aplikasi crash. Blok try/catch memungkinkan Anda menampilkan pesan error yang informatif kepada pengguna dan menjaga pengalaman pengguna tetap lancar meskipun ada gangguan.
Selain itu, pisahkan logika fetch ke dalam fungsi terpisah agar kode lebih modular dan mudah dikelola, terutama saat Anda membutuhkan pengambilan data di banyak tempat. Misalnya, buat fungsi getUserData() yang bisa dipanggil berulang kali tanpa menulis ulang logikanya. Dan yang tak kalah penting, jika Anda mengirim data dalam format JSON (misalnya dengan POST atau PUT), jangan lupa menyertakan header Content-Type: application/json agar server bisa memahami jenis data yang dikirim. Ini adalah praktik sederhana yang sering dilupakan, tapi krusial agar komunikasi antara klien dan server berjalan lancar.
Baca juga: 5 Library Python yang Wajib Dikenal Pemula Data Analyst
Kesimpulan
Melalui Panduan Lengkap Fetch API ini, Anda telah mempelajari apa itu Fetch API, bagaimana cara kerjanya, metode HTTP yang didukung, hingga contoh implementasinya dengan pendekatan promise maupun async/await. Fetch API memberikan cara yang modern, ringkas, dan fleksibel untuk melakukan komunikasi dengan server dalam pengembangan web. Dengan pemahaman yang tepat serta praktik terbaik yang telah dibahas, Anda kini siap untuk mulai menerapkan Fetch API di proyek web Anda dan meningkatkan kualitas interaksi data di aplikasi yang Anda bangun.
Temukan Lowongan Pekerjaan Di MSBU Konsultan!
Buna