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

Bayangkan anda memesan piza secara dalam talian.

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.

Tugasan seperti permintaan API atau panggilan pangkalan data mengambil masa. Jika JavaScript menunggu setiap tugasan, aplikasi anda akan membeku. Sebaliknya, ia terus menjalankan kod lain sementara menunggu.

Sebuah Promise mewakili nilai yang akan tiba pada masa hadapan.

Sebuah Promise mempunyai tiga keadaan:

Anda jarang melihat kod yang digunakan untuk mencipta Promise baharu. Ini kerana alatan moden seperti fetch() sudah pun mengembalikan sebuah Promise untuk anda.

Apakah fungsi .then()?

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

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

Ia seperti aplikasi penghantaran. Anda memesan makanan, dan aplikasi itu berkata: "Hubungi saya apabila makanan sampai." Fungsi tersebut menunggu hasil tersebut.

Mengapa menggunakan Async/Await?

Anda boleh menyambung panggilan .then() untuk mendapatkan data pengguna, kemudian hantaran, kemudian komen. Ini berfungsi, tetapi rantaian yang panjang sukar untuk dibaca.

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

Adakah await menyekat JavaScript?

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

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

Aliran contoh:

  1. Jalankan kod dalam fungsi async.
  2. Temui await dan hentikan fungsi tersebut.
  3. Jalankan selebihnya aplikasi anda.
  4. Apabila tugasan selesai, sambung semula fungsi async tersebut.

Async/await hanyalah cara yang lebih bersih untuk menulis Promise. Ia adalah syntactic sugar.

Perkara penting yang perlu diingat:

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