Async/await adalah fitur JavaScript yang memungkinkan pengembang untuk menulis kode asinkron dengan cara yang terlihat lebih sinkron. Dengan async/menunggu, pengembang dapat menulis kode yang menunggu operasi asinkron selesai, tanpa memblokir thread utama eksekusi.
Advertisement
Dalam artikel ini, kita akan mengeksplorasi cara menggunakan async/menunggu dalam JavaScript dengan beberapa contoh.
Sintaks Async/ Await
Sintaks async/await cukup sederhana. Untuk mendefinisikan fungsi asinkron, Anda menambahkan kata kunci async sebelum kata kunci fungsi, seperti ini:
async function getData() {
// kode asinkron ada di sini
}123async functiongetData(){ // kode async ada di sini}
Di dalam fungsi async, Anda dapat menggunakan kata kunci await untuk menunggu Promise diselesaikan, seperti ini:
async function getData() {
respon const = menunggu pengambilan(`https://api.example.com/data`);
data const = menunggu respon.json();
mengembalikan data;
}12345async functiongetData(){ constresponse=menunggu pengambilan(`https://api.example.com/data`); constdata=menunggu respon.json(); returndata;}
Dalam contoh ini, kami menggunakan fungsi pengambilan untuk membuat permintaan HTTP, lalu menggunakan kata kunci await untuk menunggu respons dikembalikan. Kami kemudian menggunakan kata kunci await lagi untuk menunggu data JSON diuraikan sebelum mengembalikannya. Contoh: Mengambil data dari API menggunakan Async/Await
Mari kita lihat lebih dekat cara menggunakan async/menunggu untuk mengambil data dari API. Dalam contoh ini, kami akan menggunakan fungsi pengambilan untuk membuat permintaan HTTP ke API GitHub, lalu menggunakan async/menunggu untuk menunggu respons dikembalikan.
async function fetchGithubUser(username) {
url const = `https://api.github.com/users/${username}`;
respons const = menunggu pengambilan (url);
data const = menunggu respon.json();
mengembalikan data;
}
fetchGithubUser(`octocat`)
.then(data => console.log(data))
.catch(error => console.error(error));12345678910async functionfetchGithubUser(username){ consturl=`https://api.github.com/users/${username}`; constresponse=menunggu pengambilan(url); constdata=menunggu respon.json(); returndata;} fetchGithubUser(`octocat`) .then(data=>console.log(data)) .catch(error=>console.error(error));
Dalam contoh ini, kita mendefinisikan fungsi asinkron bernama fetchGithubUser yang menggunakan Nama pengguna GitHub sebagai parameternya. Di dalam fungsi, kami membuat URL untuk permintaan API, menggunakan fungsi pengambilan untuk membuat permintaan, lalu menggunakan kata kunci await untuk menunggu respons dikembalikan. Kami kemudian menggunakan kata kunci await lagi untuk menunggu data JSON diuraikan sebelum mengembalikannya.
Untuk memanggil fungsi async, kami menggunakan sintaks Promise standar, dengan metode .then() untuk menangani kasus sukses dan .catch( ) metode untuk menangani error.
Contoh: Menggunakan Janji dengan Async/Await
Terkadang, Anda mungkin perlu menggunakan Janji dengan async/menunggu. Dalam contoh ini, kita akan menggunakan metode Promise.all() untuk membuat beberapa permintaan API secara paralel, lalu menggunakan async/await untuk menunggu semua permintaan selesai sebelum melanjutkan.
async function fetchGithubData() {
url const = [
`https://api.github.com/users/octocat`,
`https://api.github.com/users/mojombo`,
`https://api.github.com/users/defunkt`
];
janji const = urls.map(url => fetch(url));
tanggapan const = menunggu Janji.semua(janji);
const data = menunggu Promise.all(responses.map(response => response.json()));
mengembalikan data;
}
ambilGithubData()
.then(data => console.log(data))
.catch(error => console.error(error));1234567891011121314151617async functionfetchGithubData(){ consturls=[ `https://api.github.com/users/octocat`, `https://api.github.com/users /mojombo`, `https://api.github.com/users/defunkt` ]; constpromises=urls.map(url=>ambil(url)); constresponses=menunggu Promise.all(janji); constdata=menunggu Promise.all(responses.map(response=>response.json())); returndata;} fetchGithubData() .then(data=>console.log(data)) .catch(error=>console.error(error));
Dalam contoh ini, kita mendefinisikan fungsi asinkron yang disebut fetchGithubData yang membuat larik API meminta URL lalu menggunakan metode map() untuk membuat larik Janji yang akan mengambil data dari setiap URL. Kami kemudian menggunakan metode Promise.all() untuk menunggu semua permintaan selesai sebelum melanjutkan.
Setelah kami menerima semua respons, kami menggunakan metode map() lagi untuk membuat larik Janji yang akan mengurai JSON data dari setiap respon. Kami kemudian menggunakan kata kunci await lagi untuk menunggu semua Janji ini selesai sebelum mengembalikan data sebagai larik objek.Praktik Terbaik
untuk Menggunakan Async/Menunggu
Berikut adalah beberapa praktik terbaik untuk menggunakan async/menunggu dalam kode JavaScript Anda:
Selalu tangani kesalahan : Kode asinkron rentan terhadap kesalahan, jadi penting untuk selalu menanganinya dengan benar. Anda dapat menggunakan blok coba/tangkap untuk menangkap kesalahan dalam fungsi async, atau Anda dapat menggunakan metode .catch() pada Janji untuk menangani kesalahan dalam kode panggilan. Jangan terlalu sering menggunakan async/menunggu: Sementara async/menunggu dapat membuat kode asinkron lebih mudah dibaca dan ditulis, tidak selalu diperlukan atau sesuai. Hanya gunakan async/menunggu saat Anda perlu menunggu Promise diselesaikan sebelum melanjutkan. Gunakan Promise.all() untuk permintaan paralel: Jika Anda perlu membuat beberapa permintaan API secara paralel, gunakan metode Promise.all() untuk menunggu semua permintaan harus diselesaikan sebelum melanjutkan. Jangan memblokir utas utama: Ingat bahwa kode asinkron dimaksudkan untuk berjalan di latar belakang, jadi hindari memblokir utas eksekusi. Jika kode Anda membutuhkan waktu lama untuk dijalankan, pertimbangkan untuk menggunakan pekerja web untuk menjalankannya di latar belakang. Jaga agar fungsi tetap kecil dan fokus: Seperti halnya fungsi apa pun, penting untuk menjaga agar fungsi asinkron tetap kecil dan fokus. Jika fungsi melakukan terlalu banyak, pertimbangkan untuk memecahnya menjadi fungsi yang lebih kecil dan lebih fokus.Kesimpulan
Async/await adalah fitur hebat JavaScript yang dapat membuat kode asinkron lebih mudah dibaca dan ditulis. Dengan menggunakan kata kunci await untuk menunggu Promises diselesaikan, Anda dapat menulis kode yang lebih terlihat dan terasa seperti kode sinkron. Ingatlah untuk menangani kesalahan dengan benar, gunakan Promise.all() untuk permintaan paralel, dan hindari memblokir utas eksekusi.
Referensi tecadmin.com