Async, Tunggu dalam Javascript

Dalam Javascript async, tunggu menyediakan cara yang lebih mudah dibaca dan "bersih" untuk bekerja dengan janji. (Anda boleh membaca tentang janji di sini).

Mula-mula mari kita fahami sintaks.

Kata kunci async:

Kami mempunyai kata kunci async, apabila kami mengisytiharkan bahawa fungsi adalah async, kami tahu bahawa fungsi ini akan sentiasa mengembalikan janji. Walaupun anda mengembalikan nilai secara langsung, JavaScript secara automatik membungkusnya dalam janji.

tunggu Kata kunci:

Pertama sekali kita mesti tahu bahawa jika kita ingin menggunakan kata kunci await, kita hanya boleh menggunakannya dalam fungsi async.
Kata kunci menunggu ini sedang menjeda pelaksanaan fungsi async sehingga janji diselesaikan atau ditolak.

Mari kita lihat contoh async/menunggu yang sangat mudah dan selepas itu kita akan menggunakan contoh yang lebih besar yang akan membandingkan pendekatan janji penuh (tanpa async/menunggu) dengan pendekatan async/menunggu.

contoh mudah async/menunggu:

Jom pecahkan:

1. response.ok: Sifat ini menyemak sama ada kod status HTTP respons berada dalam julat yang berjaya (200-299).
2. response.json(): Jika respons berjaya, fungsi ini menghuraikan data JSON yang dikembalikan oleh pelayan.
3. response.status: Ini memberikan anda kod status yang tepat, seperti 404 (Tidak Ditemui) atau 500 (Ralat Pelayan).

Sekarang kita memahami asas async/menunggu mari kita selami lebih dalam dan lihat contoh lain dengan janji.
Kami mempunyai 3 fungsi, setiap fungsi mengembalikan janji:

(Penjelasan untuk fungsi tersebut boleh anda temui di sini)

Sekarang, kita boleh memanggil fungsi tersebut dengan than() dan catch():

Kod ini ialah contoh rantaian janji dalam JavaScript, yang mana operasi tak segerak (seperti mengambil data) dilakukan secara berurutan dan setiap langkah bergantung pada keputusan yang sebelumnya.

• Setelah getOrders(user.id) menyelesaikan, ia menghantar tatasusunan pesanan ke fungsi panggil balik di dalam .then() seterusnya

• Pesanan dilog ke konsol.

• Kemudian, getOrderDetails(orders[1]) dipanggil, yang mengambil urutan kedua dalam tatasusunan pesanan (dengan mengandaikan ia wujud).

• Fungsi ini mengembalikan janji yang diselesaikan apabila butiran pesanan diambil.

• Janji daripada getOrderDetails() dikembalikan, jadi .then() seterusnya menunggu janji ini diselesaikan.

Keputusan:

Pendekatan Async/Await:

Kod ini ialah contoh cara async/wait digunakan dalam JavaScript untuk mengendalikan operasi tak segerak dengan lebih mudah dibaca, berbanding dengan pendekatan rantai janji.

Penjelasan:
1.fungsi async asyncAwaitExample():

• Fungsi ini ditandakan sebagai tidak segerak, yang bermaksud ia akan sentiasa kembalikan janji. Ia membenarkan penggunaan kata kunci tunggu di dalamnya.
  • Di dalam fungsi, kod tak segerak boleh ditulis dengan cara yang kelihatan dan berkelakuan seperti kod segerak, meningkatkan kebolehbacaan.

1. cuba { ... } tangkap (ralat) { ... }:

• Blok cuba-tangkap digunakan untuk mengendalikan ralat. Sebarang ralat yang berlaku semasa pelaksanaan operasi tak segerak akan ditangkap dalam blok tangkapan.

1. pengguna const = tunggu getUser(1);:

• Kata kunci await menjeda pelaksanaan fungsi sehingga janji getUser(1) diselesaikan. -Setelah janji getUser diselesaikan, hasilnya (objek pengguna) disimpan dalam pembolehubah pengguna -Jika janji ditolak (iaitu, ralat berlaku), ia melompat ke blok tangkapan untuk mengendalikan ralat -Operasi yang sama untuk Const Order, const details

4.tangkap (ralat) { console.log("error is:", error); }:

• Jika mana-mana fungsi tak segerak (getUser, getOrders, atau getOrderDetails) membuang ralat atau janjinya ditolak, pelaksanaan melompat ke blok tangkapan.

Keputusan:

Faedah async/menunggu:

1.Kebolehbacaan: Kod tak segerak kelihatan seperti kod segerak, mengurangkan keperluan untuk menyekat .then() bersarang atau menangani neraka panggil balik.
2.Pengendalian Ralat: Dengan blok cuba-tangkap yang ringkas, anda boleh menangani ralat dengan cara yang lebih mudah daripada menggunakan .catch() dengan janji.
3.Kebolehselenggaraan: Apabila logik menjadi lebih kompleks, lebih mudah untuk mengikuti dan mengekalkan dengan async/menunggu berbanding dengan rantai janji.

Atas ialah kandungan terperinci Async, Tunggu dalam Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!