JavaScript - Fetch API: Panduan Pemula

Hai, para pemrogram yang sedang belajar! Hari ini, kita akan memulai perjalanan menarik ke dunia Fetch API JavaScript. Jangan khawatir jika Anda baru dalam dunia pemrograman - saya akan menjadi panduan Anda, menjelaskan segala sesuatunya secara langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita masuk ke dalam!

Apa Itu Fetch API?

Imaginasi Anda di restoran, dan Anda ingin memesan makanan favorit Anda. Anda memanggil pelayan (itu Anda membuat permintaan), pelayan pergi ke dapur (itu server), dan membawa kembali makanan enak Anda (itu tanggapan). Fetch API bekerja secara mirip, tapi bukan makanan, melainkan data!

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

mari 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 hal ini segera!

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

Sekarang, mari kita masuk lebih dalam bagaimana kita menangani tanggapan dari permintaan Fetch. Kita menggunakan sesuatu yang disebut 'then...catch'. Picturkan ini sebagai set instruksi untuk 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('Tanggapan jaringan tidak baik');
}
return response.json();
})
.then(data => {
console.log('Data pengguna:', data);
})
.catch(error => {
console.error('Ada masalah dengan operasi fetch:', error);
});

mari membongkar ini:

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

Menangani Tanggapan Fetch() API Secara Asinkron

kadang-kadang, kita ingin kode kita menunggu operasi fetch selesai sebelum melanjutkan. Ini di mana 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('Tanggapan jaringan tidak baik');
}
const data = await response.json();
console.log('Data pengguna:', data);
} catch (error) {
console.error('Ada masalah dengan operasi fetch:', error);
}
}

fetchUsers();

Dalam contoh ini:

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

Opsi dengan Fetch() API

Fetch API tidak hanya tentang mendapatkan data - Anda juga dapat menyesuaikan permintaan Anda! Itu seperti dapat menentukan secara 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 digunakan (GET, POST, dll.)	method: 'POST'
headers	Header apa pun yang ingin Anda tambahkan ke permintaan	headers: { 'Content-Type': 'application/json' }
body	Data apa pun yang ingin Anda kirimkan dengan permintaan	body: JSON.stringify({ name: 'John' })
mode	Mode yang Anda ingin gunakan untuk permintaan	mode: 'cors'

mari lihat contoh menggunakan 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('Sukses:', 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 khayalan 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 pustaka eksternal.

2. Berdasarkan Promise: Fetch mengembalikan Promise, yang membuatnya mudah 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 yang 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('Data yang diambil:', data));

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

Dan begitu juga, teman-teman! Kita telah melakukan perjalanan melalui dunia Fetch API, dari memahami apa itu, menangani tanggapan, menggunakan opsi, dan menghargai keuntungan nya. Ingat, seperti keterampilan lainnya, memahami Fetch API memerlukan latihan. Jadi jangan takut untuk mencoba dan mencoba permintaan berbeda.

Selamat coding, dan semoga permintaan fetch Anda selalu mengembalikan data yang Anda cari!

Credits: Image by storyset