JavaScript - Fetch API: Panduan untuk Pemula

Hai, para pemrogram yang sedang belajar! Hari ini, kita akan memulai perjalanan menarik ke dunia Fetch API JavaScript. Jangan khawatir jika Anda baru saja memulai dalam pemrograman – saya akan menjadi panduan Anda yang ramah, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambillah一杯咖啡（atau teh, jika itu yang Anda sukai), dan mari kita masuk ke dalam!

Apa Itu Fetch API?

Bayangkan Anda berada di restoran, dan Anda ingin memesan makanan favorit Anda. Anda memanggil pelayan (itu adalah Anda membuat permintaan), pelayan pergi ke dapur (itu adalah server), dan membawa kembali makanan enak Anda (itu adalah tanggapan). Fetch API bekerja dengan cara yang mirip, tetapi bukan makanan, melainkan data!

Fetch API adalah antarmuka modern yang memungkinkan Anda membuat permintaan jaringan ke server dari browser. Itu seperti seorang utusan yang dapat mengirim permintaan ke server dan membawa kembali data yang Anda butuhkan.

mari kita lihat contoh sederhana:

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Jangan khawatir jika ini terlihat membingungkan – kita akan membongkar itu segera!

Menangani Tanggapan Fetch() API dengan 'then...catch' Block

Sekarang, mari kita masuk lebih mendalam bagaimana kita menangani tanggapan dari permintaan Fetch. Kita menggunakan sesuatu yang disebut 'then...catch' block. Bayangkan itu seperti set instruksi apa yang harus dilakukan saat pelayan membawa kembali pesanan Anda (atau jika mereka jatuh saat membawa nya!)

fetch('https://api.example.com/users')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('User data:', data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});

mari kita bongkar ini:

1. Kita mulai dengan memanggil fetch() dengan URL yang kita ingin mendapatkan data.
2. Pertama .then() memeriksa apakah tanggapan baik. Jika tidak, itu melempar kesalahan.
3. Jika tanggapan baik, kita konversi ke format JSON.
4. Kedua .then() menerima data JSON dan mencatatnya ke konsol.
5. Jika ada kesalahan di mana saja, blok .catch() akan menangani kesalahan.

Menangani Tanggapan Fetch() API Secara Asinkron

kadang-kadang, kita ingin kode kita menunggu operasi fetch selesai sebelum melanjutkan. Ini adalah tempat async/await berguna. Itu seperti mengatakan ke pelayan, "Saya akan menunggu di sini sampai pesanan saya siap."

async function fetchUsers() {
try {
const response = await fetch('https://api.example.com/users');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log('User data:', data);
} catch (error) {
console.error('There was a problem with the fetch operation:', error);
}
}

fetchUsers();

Dalam contoh ini:

1. Kita mendefinisikan fungsi async yang disebut fetchUsers.
2. Dalam fungsi, kita menggunakan await untuk menunggu operasi fetch selesai.
3. Kita kemudian menunggu tanggapan dikonversi ke JSON.
4. Jika terjadi kesalahan, mereka ditangkap di blok catch.

Opsi dengan Fetch() API

Fetch API tidak hanya tentang mendapatkan data – Anda juga dapat menyesuaikan permintaan Anda! Itu seperti dapat menentukan dengan tepat bagaimana Anda ingin makanan Anda dipersiapkan di restoran.

Berikut adalah tabel dari beberapa opsi umum yang Anda dapat gunakan dengan fetch:

Opsi	Deskripsi	Contoh
method	Metode HTTP yang ingin Anda gunakan (GET, POST, dll.)	method: 'POST'
headers	Header apa pun yang Anda ingin tambahkan ke permintaan	headers: { 'Content-Type': 'application/json' }
body	Data apa pun yang Anda ingin kirimkan dengan permintaan	body: JSON.stringify({ name: 'John' })
mode	Mode yang Anda ingin gunakan untuk permintaan	mode: 'cors'

mari kita lihat contoh penggunaan beberapa opsi ini:

fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'John Doe',
email: '[email protected]'
})
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

Dalam contoh ini, kita mengirimkan permintaan POST dengan beberapa data pengguna. Itu seperti memesan pesanan khusus di restoran khayal kita!

Keuntungan Menggunakan Fetch() API

Sekarang kita telah mengeksplor Fetch API, Anda mungkin berpikir, " Mengapa saya harus menggunakan ini daripada metode lain?" Well, mari saya ceritakan beberapa keuntungan yang bagus:

1. Sederhana: Fetch terintegrasi ke dalam browser modern, jadi Anda tidak perlu menyertakan library eksternal.

2. Berdasarkan Promise: Fetch mengembalikan Promise, yang membuatnya mudah untuk menangani operasi asinkron.

3. Flexibel: Anda dapat mudah menyesuaikan permintaan Anda dengan berbagai opsi.

4. Modern: Itu adalah pendekatan yang lebih modern dibandingkan metode lama seperti XMLHttpRequest.

5. Konsisten: Itu menyediakan cara konsisten untuk membuat permintaan jaringan di berbagai browser.

Berikut adalah contoh yang menunjukkan keuntungan ini:

async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
}
}

fetchData('https://api.example.com/data')
.then(data => console.log('Fetched data:', data));

Fungsi sederhana ini dapat digunakan untuk mengambil data dari setiap URL, menunjukkan keajaiban dan fleksibilitas Fetch API.

Dan itu adalah semua, teman-teman! Kita telah mengembara melalui dunia Fetch API, dari memahami apa itu, menangani tanggapan, menggunakan opsi, dan menikmati keuntungannya. Ingat, seperti keterampilan lainnya, memahami Fetch API memerlukan latihan. Jadi jangan khawatir untuk mencoba dan mencoba permintaan berbeda.

Selamat coding, dan may your fetch requests always bring back the data you're looking for!

Credits: Image by storyset