Apa itu Asynchronous Javascript
Asynchronous JavaScript adalah konsep di mana kode JavaScript dapat menjalankan operasi tanpa harus menunggu operasi sebelumnya selesai terlebih dahulu. Dalam mode asynchronous, operasi-operasi dapat berjalan secara bersamaan, sehingga eksekusi kode tidak terblokir dan aplikasi tetap responsif.
Dalam JavaScript, kita dapat menggunakan fitur-fitur seperti callback, Promise, dan async/await untuk mengatur operasi-operasi asynchronous. Callback adalah suatu fungsi yang dijalankan secara asinkron dan dipanggil kembali setelah operasi selesai. Promise adalah objek yang mewakili nilai yang mungkin belum tersedia, dan dapat digunakan untuk mengatasi asynchrony dengan lebih mudah dan jelas. Sedangkan async/await adalah cara baru yang diperkenalkan di ES6 untuk mengelola asynchronous secara lebih sederhana dan mudah dibaca, di mana kita dapat menulis kode asynchronous seperti kode synchronous.
Dengan pendekatan asynchronous, kita dapat mengoptimalkan kinerja aplikasi JavaScript, menghindari eksekusi yang terblokir, dan memastikan pengalaman pengguna yang responsif dan memuaskan.
Apa itu Async/Await?
Async/await adalah konsep dalam JavaScript yang memungkinkan kita untuk menulis kode asynchronous dengan cara yang lebih deklaratif dan mirip dengan kode synchronous. Dalam async/await, kita menggunakan kata kunci async sebelum function declaration, dan kata kunci await di depan panggilan function yang mengembalikan promise, untuk menunggu hasil promise tersebut selesai sebelum melanjutkan eksekusi kode. Dengan cara ini, kita bisa menghindari callback hell atau promise chaining yang bisa membuat kode sulit dibaca dan dipahami.
Sintaksis Async/Await
Berikut adalah sintaksis dasar async/await:
async function functionName() {
// Kode asynchronous
const result = await promise;
// Eksekusi kode setelah promise selesai
}
{codeBox}
- async: Kata kunci untuk mendefinisikan bahwa sebuah function adalah asynchronous.
- functionName(): Nama function yang didefinisikan sebagai async function.
- await: Kata kunci untuk menunggu hasil dari promise sebelum melanjutkan eksekusi kode setelahnya.
- promise: Expression yang mengembalikan promise, yaitu objek yang mewakili nilai yang mungkin tidak ada saat ini, tapi akan tersedia di masa depan.
Async/Await mengubah cara kita menulis kode asynchronous, dari pola yang bersarang dalam callback menjadi pola yang lebih linear dan mudah dipahami. Kita dapat menggantikan callback hell atau promise chaining dengan kode yang lebih rapi dan struktural.
Contoh Penggunaan Async/Await
Mari kita lihat contoh penggunaan async/await untuk mengambil data dari API menggunakan fetch, yang merupakan built-in function di JavaScript untuk melakukan HTTP request
async function getData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) {
throw new Error('Failed to fetch data from API');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
getData();
{codeBox}
Hasil :
Dalam contoh di atas, kita menggunakan await untuk menunggu hasil dari fetch, dan melakukan penanganan error dengan melempar error baru jika response tidak ok. Setelah itu, kita menggunakan await lagi untuk menunggu hasil dari response.json(). Jika tidak terdapat error, data akan dicetak ke console. Jika terdapat error, pesan error akan dicetak ke console.
1. Fungsi async
Fungsi yang diberi tanda async adalah fungsi yang mengandung operasi asynchronous dan mengembalikan Promise. Fungsi async selalu mengembalikan Promise, baik itu resolved atau rejected, tergantung pada apakah ada error atau tidak dalam eksekusi fungsi tersebut.
Contoh:
async function getData() {
// operasi asynchronous
return "Data berhasil diambil";
}
{codeBox}
2. Kata kunci await
Kata kunci await digunakan dalam fungsi yang diberi tanda async untuk menunggu hasil dari operasi asynchronous sebelum melanjutkan eksekusi kode selanjutnya. await menghentikan eksekusi kode di dalam fungsi hingga Promise yang diawait berhasil resolved atau rejected.
Contoh:
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
{codeBox}
3. Penanganan error
Dalam async/await, kita bisa menangani error menggunakan try-catch. Jika Promise yang diawait gagal resolved, maka eksekusi kode akan langsung melompat ke blok catch untuk menangani error tersebut.
Contoh:
async function getData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
throw new Error('Gagal mengambil data');
}
}
{codeBox}
4. Menggabungkan dengan Promise lainnya
Async/await dapat digunakan bersamaan dengan Promise lainnya dalam kode JavaScript. Kita bisa menggunakan Promise.all untuk menunggu beberapa Promise sekaligus, atau Promise.race untuk menunggu Promise yang pertama kali selesai.
Contoh:
async function getData() {
const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const [data1, data2] = await Promise.all([promise1, promise2]);
// melakukan sesuatu dengan data1 dan data2
}
{codeBox}
5. Penanganan error secara individual
Kita juga bisa menangani error secara individual pada setiap await dalam async/await, sehingga jika ada error pada satu operasi asynchronous, operasi lainnya masih bisa berlanjut tanpa harus berhenti.
Contoh:
async function getData() {
const response1 = await fetch('https://api.example.com/data1').catch(error => console.error(error));
const response2 = await fetch('https://api.example.com/data2').catch(error => console.error(error));
// melakukan sesuatu dengan response1 dan response2
}
{codeBox}
6. Fungsi IIFE (Immediately Invoked Function Expression)
Kita juga bisa menggunakan async/await dalam sebuah fungsi IIFE untuk menjalankan operasi asynchronous segera setelah fungsi tersebut didefinisikan.
Contoh:
(async function() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// melakukan sesuatu dengan data
} catch (error) {
console.error(error);
throw new Error('Gagal mengambil data');
}
})();
{codeBox}
7. Penggunaan async/await pada Promise chaining
Async/await dapat digunakan bersamaan dengan Promise chaining, di mana kita bisa menggabungkan pemanggilan beruntun terhadap Promise dalam satu fungsi.
Contoh:
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
const response2 = await fetch('https://api.example.com/data2');
const data2 = await response2.json();
// melakukan sesuatu dengan data dan data2
}
{codeBox}
Itulah penjelasan lengkap tentang async/await dalam JavaScript. Dengan fitur ini, kita dapat menulis kode asynchronous yang lebih mudah dipahami dan dikelola, serta menghindari callback hell atau piramida dari then() yang kompleks. Semoga penjelasan ini membantu Anda memahami async/await dan dapat menggunakannya dalam kode JavaScript Anda!