Apa itu Async-Await Syntax Javascript

Pembahasan terakhir mengenai asynchronous operator kali ini adalah penggunaan sintak async/await. Apa itu? 

Seperti yang sudah kita ketahui, pada JavaScript callback dan Promise merupakan teknik yang digunakan selama kita berurusan dengan proses asynchronous. Namun penulisan kode akan sedikit berbeda dari proses synchronous. 

Contohnya, untuk mendapatkan nilai coffee dari sebuah proses asynchronous, kita tidak dapat melakukannya dengan teknik seperti ini:  

function makeCoffee() {
 const coffee = getCoffee(); // Async proses menggunakan promise
 console.log(coffee);
}
 
makeCoffee();

Melainkan, harus menuliskannya seperti ini:

• Promise Approach
• 
  

function makeCoffee() {
 getCoffee()
 .then(coffee => {
   console.log(coffee)
 })
}
 
 
makeCoffee();
 
 
/* output
Coffee didapatkan!
*/

• Callback Approach

function makeCoffee() {
 getCoffee(function(coffee) {
   console.log(coffee)
 })
}
 
 
makeCoffee();
 
 
/* output
Coffee didapatkan!
*/

Namun semenjak ES8 (ECMAScript 2022) kita dapat menuliskan asynchronous process layaknya synchronous process dengan bantuan keyword async dan await. 

Fitur async/await sebenarnya hanya syntactic sugar. Itu berarti secara fungsionalitas bukan merupakan sebuah fitur baru dalam JavaScript. Namun hanya gaya penulisan baru yang dikembangkan dari kombinasi penggunaan Promise dan generator (pembahasan mengenai generator bisa Anda pelajari di sini). Sehingga async/await ini tidak dapat digunakan jika tidak ada Promise.

Using async/await

Lantas bagaimana cara menggunakan async/await ini? Oke kembali lagi pada contoh kode sebelumnya. Namun kita perlihatkan juga fungsi getCoffee() bagaimana ia dibuat menggunakan promise.

1. const getCoffee = () => {
2.  return new Promise((resolve, reject) => {
3.    const seeds = 100;
4.    setTimeout(() => {
5.      if(seeds >= 10) {
6.        resolve("Coffee didapatkan!");
7.      } else {
8.        reject("Biji kopi habis!")
9.      }
10.    }, 1000)
11.  })
12. }

Fungsi getCoffee() yang dibangun menggunakan promise.

1. function makeCoffee() {
2. getCoffee()
3. .then(coffee => {
4. console.log(coffee)
5. })
6. }
7.  
8. makeCoffee();
9.  
10. /* output
11. Coffee didapatkan!
12. */

Kode di atas merupakan cara biasa kita menggunakan sebuah promise. Untuk mendapatkan nilai coffee, kita dapat memperolehnya di dalam method .then() dari hasil yang dikirimkan oleh resolve.

Dengan async/await, kita dapat menggunakan promise dengan cara seperti ini:

1. function makeCoffee() {
2.  const coffee = getCoffee();
3.  console.log(coffee);
4. }
5.  
6. makeCoffee();

Namun, tentu dengan menambahkan keyword async dan await seperti ini:

1. async function makeCoffee() {
2.  const coffee = await getCoffee();
3.  console.log(coffee);
4. }
5.  
6. makeCoffee();
7.  
8. /* output
9. Coffee didapatkan!
10. */

Keyword async digunakan untuk memberitahu JavaScript untuk menjalankan fungsi makeCoffee() secara asynchronous. Lalu keyword await digunakan untuk menghentikan proses pembacaan kode selanjutnya sampai fungsi getCoffee() mengembalikan nilai promise resolve.

“Walaupun await menghentikan proses pembacaan kode selanjutnya pada fungsi makeCoffee. Tapi ini tidak akan mengganggu proses runtime sesungguhnya pada JavaScript (global). Karena fungsi makeCoffee berjalan secara asynchronous. Kita tidak dapat menggunakan await tanpa membuat function dalam scope-nya berjalan secara asynchronous.”

Handle onRejected using async/await

Perlu jadi catatan bahwa await hanya akan mengembalikan nilai jika promise berhasil dilakukan (onFulfilled). Lantas bagaimana jika promise gagal dilakukan (onRejected)? Kembali lagi kepada prinsip synchronous code. Kita dapat menangani sebuah eror atau tolakan dengan menggunakan try...catch.

Ketika menggunakan async/await, biasakan ketika mendapatkan resolved value dari sebuah promise, untuk menempatkannya di dalam block try seperti ini:

1. async function makeCoffee() {
2.  try {
3.    const coffee = await getCoffee();
4.    console.log(coffee);
5.  }
6. }

Dengan begitu kita dapat menggunakan block catch untuk menangani jika promise gagal dilakukan (onRejected).

1. async function makeCoffee() {
2.  try {
3.    const coffee = await getCoffee();
4.  console.log(coffee);
5.  } catch(rejectedReason) {
6.    console.log(rejectedReason);
7.  }
8. }
9.  
10. makeCoffee();
11.  
12. /* output
13. Biji kopi habis!
14. */

Chaining Promise using async/await

Pertanyaan selanjutnya adalah bagaimana melakukan promise berantai bila menggunakan async/await? Jawabannya adalah sama seperti ketika kita mendapatkan nilai dari function yang berjalan secara synchronous.

Jika sebelumnya kita melakukan chaining promise dengan method .then() seperti ini:

function reserveACoffee(type, miligrams) {
 getSeeds(type, miligrams)
 .then(makeCoffee)
 .then(servingToTable)
 .then(resolvedValue => {
   console.log(resolvedValue);
 })
 .catch(rejectedReason => {
   console.log(rejectedReason);
 })
}
 
reserveACoffee("liberica", 80);
 
/* output:
Pesanan kopi sudah selesai!
*/

Dengan pendekatan async/await, kita dapat melakukannya dengan cara seperti ini:

1. async function reserveACoffee(type, miligrams) {
2.  try {
3.    const seeds = await getSeeds(type, miligrams);
4.    const coffee = await makeCoffee(seeds);
5.    const result = await servingToTable(coffee);
6.    console.log(result);
7.  } catch(rejectionReason) {
8.    console.log(rejectionReason);
9.  }
10. }
11.  
12. reserveACoffee("liberica", 80);
13.  
14. /* output:
15. Pesanan kopi sudah selesai!
16. */

Async/await ini menjadi fitur baru yang sangat berguna. Terlebih untuk kita yang lebih nyaman menangani proses asynchronous dengan menggunakan gaya synchronous