Panduan praktikal untuk Aysnc dan Await for JavaScript Developers

pengenalan

Async dan Await ialah kata kunci JavaScript yang diperkenalkan dalam ECMAScript 2017 (ES8) yang membolehkan penulisan kod tak segerak dalam cara yang lebih mudah dibaca, seperti segerak dan terurus. Mereka memudahkan operasi pengendalian yang mengambil masa untuk diselesaikan, seperti mengambil data daripada API.

Sebelum kita menyelami, mari kita fahami konsep pengaturcaraan segerak dan tak segerak dalam JavaScript. Dalam pengaturcaraan segerak, tugasan dilaksanakan secara berurutan, satu demi satu, mengikut susunan ia muncul. Setiap tugasan mesti diselesaikan sebelum tugasan seterusnya bermula. Sebaliknya, pengaturcaraan tak segerak membenarkan tugasan dijalankan di latar belakang, membolehkan JavaScript terus melaksanakan tugasan lain tanpa menunggu tugasan sebelumnya selesai.

Seperti yang kita ketahui, JavaScript ialah bahasa berbenang tunggal, bermakna ia hanya boleh melaksanakan satu tugas pada satu masa. Jika itu yang berlaku, bagaimanakah JavaScript mengendalikan kod tak segerak? Ini dimungkinkan oleh Event Loop, mekanisme utama yang berfungsi bersama persekitaran masa jalan JavaScript. Gelung peristiwa membolehkan operasi tak segerak dijalankan tanpa menyekat utas utama, memastikan JavaScript kekal responsif. Tanpa berlengah lagi, dapatkan secawan kopi dan mari beralih terus ke topik hari ini!

Apakah Async?

Untuk lebih memahami konsep ini, kami akan mengambil pendekatan yang lebih praktikal. Sebelum pengenalan async dan tunggu, Promises telah dikendalikan menggunakan "cara lama", yang diperkenalkan dalam ES6 (ECMAScript 2015). Mari terokai contoh di bawah.

Kod di atas menunjukkan sintaks tradisional untuk mengendalikan Janji. Pembina Promise digunakan untuk mencipta contoh Promise baharu. Ia menerima fungsi (dikenali sebagai fungsi pelaksana) sebagai hujahnya, yang merangkumi dua parameter: selesaikan dan tolak. Fungsi pelaksana ini mengandungi logik untuk operasi tak segerak. Dalam contoh ini, azam dipanggil serta-merta, menandakan bahawa Janji telah berjaya diselesaikan dengan nilai tertentu. Setelah Janji diselesaikan, kaedah .then dicetuskan, melaksanakan panggilan baliknya untuk melog hasilnya.

Walau bagaimanapun, sintaks ini agak sukar untuk diingati. Pengenalan async/wait memudahkan proses pengendalian janji, menjadikannya lebih mudah untuk dibaca dan difahami. Mari lihat contoh di bawah.

Untuk melaksanakan fungsi async, kami menggunakan kata kunci async, yang memberitahu JavaScript bahawa ini bukan fungsi biasa tetapi tidak segerak. Contoh kedua menunjukkan cara perkara yang sama boleh dilakukan menggunakan fungsi anak panah.

Satu lagi konsep penting yang perlu diberi perhatian ialah kata kunci tunggu. Kedua-dua async dan await bekerjasama untuk memudahkan pengendalian Promises. Kata kunci await hanya boleh digunakan dalam fungsi tak segerak—ia tidak boleh digunakan di luar fungsi atau dalam fungsi biasa. Ia mesti sentiasa muncul dalam fungsi yang ditandakan sebagai tidak segerak. Memandangkan kita telah mempelajari asas-asasnya, mari kita selami konsepnya dengan lebih mendalam!

Cara Ia Berfungsi Di Sebalik Tabir

Ramai pembangun JavaScript menggunakan async/menunggu secara kerap dalam kod mereka, tetapi hanya segelintir yang benar-benar memahami cara ia berfungsi di bawah hud. Di situlah tutorial ini masuk. Mari terokai contoh untuk memecahkannya.

Dalam contoh ini, kami menggunakan kaedah .then untuk lebih memahami cara Janji berfungsi berbanding async/awaitapproach. Apabila fungsi handlePromise() dipanggil, kod tersebut melaksanakan baris demi baris. Apabila JavaScript menemui kaedah .then, ia mendaftarkan panggilan balik ke Microtask Queue dan segera beralih ke baris seterusnya, mencetak 'hello world'.

Setelah semua tugasan segerak selesai, enjin JavaScript menyemak Gilir Microtask untuk tugasan yang belum selesai. Selepas lima saat, setTimeout selesai dan panggilan baliknya ditolak semula ke timbunan panggilan. Pada ketika ini, Janji telah diselesaikan dan panggilan balik yang didaftarkan berjalan, mengelog hasilnya.

Ringkasnya, enjin JavaScript tidak menunggu, ia bergerak terus ke baris kod seterusnya. Sekarang, adakah tingkah laku yang sama digunakan apabila menggunakan async/menunggu, atau adakah ia berfungsi secara berbeza? Mari ketahui!

Dalam contoh di atas, apabila fungsi handlePromise() dipanggil, baris pertama 'permulaan' dicetak. JavaScript kemudian menemui kata kunci await, yang menunjukkan bahawa fungsi itu tidak segerak dan melibatkan Janji. Ia mengenal pasti bahawa Janji akan mengambil masa lima saat untuk diselesaikan disebabkan oleh setTimeout. Pada ketika ini, fungsi handlePromise() digantung (dialih keluar daripada timbunan panggilan) dan sebarang kod selepas menunggu di dalam fungsi dijeda.

Enjin JavaScript terus melaksanakan seluruh program. Selepas lima saat, Janji diselesaikan, fungsi yang digantung dikembalikan ke timbunan panggilan dan baki baris di dalam handlePromise() 'Janji diselesaikan' dan 'penghujungnya' dilaksanakan mengikut urutan.

Perlu ambil perhatian bahawa penggantungan fungsi tidak menyekat utas utama. Jika terdapat kod lain yang ditulis di luar fungsi handlePromise(), ia akan dilaksanakan sementara Promise sedang menunggu untuk diselesaikan.

Contoh di bawah menunjukkan tingkah laku ini dalam tindakan:

Dalam contoh ini, keluaran pertama ialah permulaan. Apabila JavaScript menemui kata kunci menunggu, ia menyedari bahawa Janji akan mengambil masa lima saat untuk diselesaikan. Pada ketika ini, fungsi itu digantung, dan JavaScript meneruskan untuk melaksanakan sebarang kod di luar fungsi. Akibatnya, Kami di luar dicetak seterusnya.

Setelah Promise diselesaikan selepas lima saat, fungsi handlePromise() dipulihkan kepada timbunan panggilan, dan barisnya yang selebihnya dilaksanakan, pencetakan Promise diselesaikan diikuti dengan penghujungnya.

mari kita periksa satu lagi contoh, kita akan cuba membuat panggilan API dengan async/menunggu dalam yang lain untuk memahami konsep dengan lebih baik.

Dalam kod di atas, proses pelaksanaan mengikut prinsip yang sama yang dibincangkan sebelum ini. Apabila JavaScript menemui fungsi fetch, ia menggantung fungsi getData() dan menunggu panggilan fetch mengembalikan objek respons, objek ini mengandungi pelbagai sifat seperti status, pengepala dan badan respons. Fungsi kemudian menyambung semula pelaksanaan sebaik sahaja respons tersedia.

Ibu tindak balas ialah data yang kami perlukan, tetapi ia dalam bentuk mentah (seperti teks atau binari) dan tidak boleh digunakan serta-merta. Untuk menukarnya menjadi objek JavaScript untuk manipulasi yang lebih mudah, kami menggunakan kaedah .json(), yang menghuraikan respons JSON mentah. Proses ini melibatkan Janji yang lain, itulah sebabnya penantian kedua diperlukan. Fungsi ditangguhkan lagi sehingga Janji diselesaikan.

Setelah kedua-dua Janji dipenuhi, fungsi getData() disambung semula dan data yang dihuraikan dicetak ke konsol. Cara mudah untuk menerangkan cara pengambilan berfungsi, bukan? Sekarang, kembali kepada perbincangan utama kita!. Bagaimana jika respons API kami gagal? Bagaimanakah kita menguruskan ralat dengan async/menunggu? Mari selami perkara ini dalam bahagian seterusnya.

Mengendalikan Ralat dengan Async/Await

Secara tradisinya, ralat dalam Janji dikendalikan menggunakan kaedah .catch. Tetapi bagaimana kita boleh menangani ralat apabila menggunakan async/menunggu? Di sinilah cubaan...catch block dimainkan.

Dalam kod di atas, Promise disertakan dalam blok percubaan, yang dilaksanakan jika Promise berjaya diselesaikan. Walau bagaimanapun, jika Janji ditolak, ralat akan ditangkap dan dikendalikan dalam blok tangkapan.

Tetapi adakah anda tahu kami masih boleh menangani ralat dengan cara tradisional? Berikut ialah contoh:

Untuk mengendalikan ralat dalam async/menunggu menggunakan pendekatan tradisional, anda hanya melampirkan kaedah tangkapan pada fungsi, seperti yang ditunjukkan di atas. Ia berfungsi dengan cara yang sama seperti blok cuba/tangkap.

Kesimpulan

Async/await telah merevolusikan cara JavaScript mengendalikan operasi tak segerak, menjadikan kod lebih mudah dibaca dan lebih mudah untuk diurus berbanding kaedah tradisional seperti .then dan .catch. Dengan memanfaatkan async dan menunggu, kami boleh menulis kod tak segerak yang terasa lebih segerak, meningkatkan kejelasan kod keseluruhan. Sambil memahami kerja dalaman—seperti gelung acara dan baris gilir microtask, melaksanakan async/menunggu adalah mudah dan sangat berkesan untuk pembangunan JavaScript moden. Dengan pengendalian ralat yang betul menggunakan try/catch atau .catch, kami boleh menguruskan janji yang berjaya dan gagal dengan yakin.

Terima kasih kerana bertahan! Saya harap artikel ini membuat async/menunggu sedikit lebih jelas untuk anda. Semoga anda berjaya dalam pengembaraan pengekodan anda—pergi bina sesuatu yang menakjubkan!

Atas ialah kandungan terperinci Panduan praktikal untuk Aysnc dan Await for JavaScript Developers. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!