Fetch API adalah fitur baru dalam JavaScript yang menyediakan cara yang lebih modern dan sederhana untuk mengirim permintaan HTTP dari klien ke server. Dalam artikel ini, kita akan menjelaskan langkah-langkah untuk menggunakan Fetch API dengan JavaScript dan memanfaatkannya dalam pengembangan web.
1. Mengenal Fetch API
Fetch API adalah API bawaan pada JavaScript yang memungkinkan kita mengirim permintaan HTTP secara asynchronous. Dibandingkan dengan pendekatan tradisional seperti menggunakan XMLHttpRequest, Fetch API menyediakan sintaks yang lebih sederhana dan ringkas.
2. Membuat Permintaan GET
Untuk mengirim permintaan GET ke server menggunakan Fetch API, kita dapat menggunakan metode fetch() dengan menyediakan URL yang dituju sebagai argumen. Berikut adalah contoh sederhana:
|
1 2 3 4 5 6 7 8 |
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { // Lakukan sesuatu dengan data yang diterima }) .catch(error => { console.error('Error:', error); }); |
Dalam contoh di atas, kita mengirimkan permintaan GET ke URL https://api.example.com/data dan menggunakan metode json() pada respons untuk mengonversi data respons menjadi objek JavaScript.
3. Mengirim Permintaan POST
Untuk mengirim permintaan POST menggunakan Fetch API, kita perlu menyediakan konfigurasi tambahan seperti metode permintaan, header, dan body data. Berikut adalah contoh penggunaan Fetch API untuk mengirim permintaan POST:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'john', password: 'secret' }) }) .then(response => response.json()) .then(data => { // Lakukan sesuatu dengan data yang diterima }) .catch(error => { console.error('Error:', error); }); |
Dalam contoh di atas, kita menentukan metode permintaan 'POST' dan mengatur header 'Content-Type' sebagai 'application/json'. Body permintaan diisi dengan objek JavaScript yang diubah menjadi format JSON menggunakan JSON.stringify().
4. Menangani Respons dan Kesalahan
Setelah permintaan dikirim, kita dapat menggunakan metode .then() untuk menangani respons yang diterima dari server. Metode .catch() digunakan untuk menangani kesalahan yang terjadi selama proses pengiriman permintaan atau pemrosesan respons.
5. Memanfaatkan Respons dan Melakukan Tindakan Lainnya
Setelah mendapatkan respons dari server, kita dapat memanfaatkan data yang diterima dan melakukkan tindakan lain sesuai kebutuhan. Misalnya, kita dapat memperbarui tampilan halaman dengan data baru atau menjalankan operasi pengolahan data.
Dengan menggunakan Fetch API dalam JavaScript, kita dapat dengan mudah dan efektif mengirim permintaan HTTP ke server. Dalam artikel ini, kita telah membahas langkah-langkah dasar untuk menggunakan Fetch API dalam pengembangan web. Mulailah menggali lebih dalam tentang Fetch API dan eksplorasi fitur-fiturnya yang lebih lanjut untuk memaksimalkan potensi pengembangan web Anda.
