𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 𝗔𝗻𝗱 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗗𝗶𝗷𝗲𝗹𝗮𝘀𝗸𝗮𝗻

Bayangkan anda memesan piza secara dalam talian.

Anda membuat pesanan. Anda tidak berdiri di depan pintu tanpa melakukan apa-apa sehingga ia sampai. Anda menonton video, bekerja, atau berbual dengan rakan-rakan. Apabila piza sampai, anda makan.

JavaScript berfungsi dengan cara yang sama.

Operasi seperti permintaan API, panggilan pangkalan data, dan pemasa (timers) mengambil masa. Jika JavaScript menunggu setiap tugasan selesai, aplikasi anda akan membeku (freeze). Sebaliknya, JavaScript menjalankan kod lain sementara menunggu keputusan.

Apakah itu Promise?

Promise ialah penanda tempat (placeholder) untuk nilai yang akan anda perolehi pada masa hadapan.

Apabila anda menjalankan: const promise = fetch("/users");

Data tersebut belum ada lagi. Promise berkata: "Saya tidak mempunyai keputusan sekarang, tetapi saya akan beritahu anda apabila ia sudah sedia."

Promise mempunyai tiga keadaan:

Kebanyakan API moden seperti fetch() memulangkan Promise secara automatik. Anda tidak perlu menciptanya secara manual setiap kali. Anda hanya perlu menggunakannya.

Apakah fungsi .then()?

Ramai orang menyangka .then() mengambil data. Ia tidak melakukannya.

.then() mendaftarkan fungsi callback. Anda memberitahu JavaScript: "Apabila Promise ini selesai, jalankan fungsi khusus ini."

Ia seperti aplikasi penghantaran makanan. Anda memesan makanan, dan aplikasi memberitahu anda: "Hubungi saya apabila makanan sampai." Fungsi tersebut menunggu isyarat tersebut.

Mengapa menggunakan Async/Await?

Anda boleh menyambung (chain) panggilan .then() untuk mendapatkan data langkah demi langkah. Ini berfungsi, tetapi rantaian yang panjang sukar untuk dibaca.

Async/await menjadikan kod anda kelihatan seperti kod langkah demi langkah yang biasa. Ia lebih bersih dan lebih mudah diikuti.

Adakah await menyekat (block) JavaScript?

Ini adalah soalan temu duga yang biasa. Jawapannya ialah tidak.

Apabila JavaScript menemui kata kunci await, ia hanya menghentikan (pause) fungsi async yang khusus itu sahaja. Selebihnya aplikasi anda akan terus berjalan.

Aliran contoh:

  1. Jalankan kod dalam fungsi.
  2. Temui await dan hentikan fungsi tersebut.
  3. Jalankan baki skrip.
  4. Sebaik sahaja tugasan selesai, sambung semula fungsi tersebut.

Ringkasan:

Sumber: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm