Pada seri sebelumnya saya membahas promise untuk menangani proses asynchronous. Pada seri ini saya akan membahas tentang async/await.

Topik bahasan pada seri ini :

  • Apa sih itu async/await ?
  • Async/await Error Handling
  • Async/await Pattern
  • Serial & Paralel
  • Promise.all & Promise.race dalam Async/await

1. Apa sih itu async/await ?

Async/await adalah fitur yang hadir sejak ES2017. Fitur ini mempermudah kita dalam menangani proses asynchronous. Untuk memahami async/await sebaiknya anda harus memahami promise terlebih dahulu.

Ada 2 kata kunci disini yaitu async dan await, mari kita lihat contohnya :

Keterangan :
async
mengubah function menjadi asynchronous
await → menunda eksekusi hingga proses asynchronous selesai, dari kode di atas berarti console.log(result) tidak akan di eksekusi sebelum prose doAsync( ) selesai. await juga bisa digunakan berkali-kali di dalam function

Sekarang mari kita coba untuk fetch dengan promise dan async/await

source : https://gist.github.com/SastraNababan/cb19c5dd2f030b6a90a3266a2a855cb3

Output nya sama tapi async/await lebih mudah dibaca. Lalu bagaimana dengan manajemen error nya ?

2. Async/await Error Handling

Error handling pada async/await menggunakan try…catch

source : https://gist.github.com/SastraNababan/abc17da38ba26d57a66987194267eda9

3. Async/await Pattern

Ada beberapa pattern untuk membuat async/await :

https://gist.github.com/SastraNababan/1fe8c29046c5b000eb88ac571f6df0e3

4. Serial & Paralel

Pada saat mengeksekusi beberapa proses asynchronous, ada kalanya kita harus memilih eksekusi secara serial atau parallel. Serial biasanya digunakan jika kita ingin mengeksekusi proses asynchronous secara berurutan. Sedangkan paralel jika ingin di eksekusi secara bersamaan, dalam hal ini urutan tidak menjadi prioritas tapi hasil dan performa.

source : https://gist.github.com/SastraNababan/8661e4efc815a14bc57bf7fa9ace9724

5. Promise.all & Promise.race dalam Async/await

Salah satu favorite saya di promise adalah promise.all dan promise.race. Karena async/await di desain untuk bekerja dengan promise, maka dengan mudah bisa kita gunakan pada async/await, contohnya :

source : https://gist.github.com/SastraNababan/1fe8c29046c5b000eb88ac571f6df0e3

Terimakasih semoga bermanfaat. Jika ada pertanyaan dan saran, silahkan post di comment box dibawah. Sampai jumpa seri async programming selanjutnya.

Artikel ini adalah bagian dari Seri Panduan Komplit Asynchronous Programming pada Javascript :

  1. Intro
  2. Callback
  3. Promise
  4. Async/await
  5. Generator (coming soon)

--

--

Sastra Panca Nababan
Coderupa

Sharing is part of my DNA. I’ve always shared my knowledge, expertise, and passion with others.