Bagian 24: Fetch API di JavaScript

Fetch API memberikan cara yang modern dan efisien untuk melakukan permintaan HTTP di JavaScript. Tidak seperti XMLHttpRequest, Fetch API menggunakan Promise dan memiliki sintaksis yang lebih bersih serta mudah dipahami.

Fetch API adalah cara modern untuk mengambil data dari server menggunakan JavaScript dengan metode yang mudah dan berbasis Promise.

Contoh sederhana penggunaan Fetch API

Kita akan mengambil data JSON dari API publik dan menampilkannya.

Hasil akan muncul di sini setelah klik tombol.

Fetch API sangat penting dalam pengembangan web modern, terutama saat bekerja dengan data dari backend atau API eksternal. Di bagian selanjutnya, kita akan mempelajari bagaimana menangani event di JavaScript dengan lebih dinamis.

Pertanyaan Umum tentang Fetch API

Apa perbedaan antara Fetch API dan XMLHttpRequest? Fetch API menggunakan Promise, membuat kode lebih bersih dan modern, sementara XMLHttpRequest menggunakan pendekatan callback yang lebih kompleks.
Apakah Fetch API mendukung semua browser? Sebagian besar browser modern mendukung Fetch API, namun pada browser lama perlu polyfill.
Bagaimana cara menangani error di Fetch API? Anda bisa menggunakan .catch() untuk menangani error jaringan, dan periksa response.ok untuk status HTTP.