Async Await
JavaScript modern menambahkan sebuah cara untuk menangani _callback_
dengan cara yang elegan melalui API berbasis Promise yang memiliki
sintaks khusus yang mengizinkan Anda untuk menganggap kode
program yang bersifat asinkron seperti kode program biasa
Seperti fitur lainnya, Promise memiliki kekurangan dalam
hal kompleksitas kode program: membuat sebuah fungsi
sebagai fungsi asinkron akan membuat nilai kembalian
dibungkus dalam Promise. Apa yang sebelumnya mengembalikan
sebuah string, sekarang akan mengembalikan Promise
// Anda dapat menggunakan kata kunci `await` untuk mengubah
sebuah Promise menjadi nilai yang ditampung oleh Promise
tersebut. Untuk saat ini, kata kunci tersebut hanya dapat
digunakan pada fungsi asinkron.
const fungsi = () => ":wave:";
const fungsiAsinkron = async () => ":wave:";
const string = fungsi();
const stringDalamPromise = fungsiAsinkron();
string.length;
// stringDalamPromise merupakan sebuah Promise, bukan string:
stringDalamPromise.length;
// Kode program yang berjalan menggunakan kata kunci `await`
dapat melempar galat, dan hal tersebut menjadi penting
karena galat tersebut harus ditangani pada bagian manapun.
const fungsiPembungkus = async () => {
const string = fungsi();
const stringDalamPromise = await fungsiAsinkron();
// Melalui kata kunci `await`, sekarang `stringDalamPromise`
// merupakan sebuah string.
string.length;
stringDalamPromise.length;
};
// Anda dapat membungkus pemanggilan fungsi asinkron pada sebuah
blok try-catch untuk menangani kasus di mana fungsi yang
dipanggil melakukan sesuatu yang tidak diharapkan.
const fungsiYangMelemparGalat = async () => {
throw new Error("Jangan panggil fungsi ini");
};
// Karena ergonomi dari API ini yang mengharuskan Anda untuk
mengembalikan satu nilai kembalian, atau melempar galat, Anda
sebaiknya memberikan informasi mengenai nilai-nilai yang
terdapat pada nilai yang dikembalikan dan melempat galat
apabila sesuatu yang benar-benar spesial terjadi.
const menangkapFungsiAsinkron = async () => {
const nilaiKembalian = "Halo dunia!";
try {
await fungsiYangMelemparGalat();
} catch (error) {
console.error("fungsiYangMelemparGalat gagal dijalankan", error);
}
return nilaiKembalian;
};
// Lalu pengguna fungsi tersebut dapat memeriksa respon
dan mengetahui apa yang harus dilakukan dengan nilai kembalian
tersebut. Walaupun contoh berikut merupakan contoh yang
sederhana, ketika Anda mulai bekerja dengan kode
yang berhubungan dengan jaringan, API sebaiknya didokumentasikan.
const contohFungsiAkarKuadrat = async (masukan: any) => {
if (isNaN(masukan)) {
throw new Error("Masukan hanya dapat berupa angka");
}
if (masukan < 0) {
return { sukses: false, pesan: "Tidak bisa mencari akar bilangan negatif" };
} else {
return { sukses: true, nilai: Math.sqrt(masukan) };
}
};
// getResponse(url, (response) => {
getResponse(response.url, (secondResponse) => {
const responseData = secondResponse.data
getResponse(responseData.url, (thirdResponse) => {
...
})
})
})
Menjadi linear seperti berikut:
const response = await getResponse(url)
const secondResponse = await getResponse(response.url)
const responseData = secondResponse.data
const thirdResponse = await getResponse(responseData.url)
...
Sintaks Async / Await dapat membuat kode program lebih condong
ke sisi kiri, dan dibaca pada ritme yang konsisten.
const periksaAkarKuadrat = async (nilai: number) => {
const respon = await contohFungsiAkarKuadrat(nilai);
if (respon.sukses) {
respon.nilai;
}
};
// Sintaks Async / Await mengubah kode yang seperti berikut: