Bagaimanakah saya bekerja dengan JavaScript Asynchronous menggunakan panggilan balik, janji, dan async/menunggu?

Bagaimanakah saya bekerja dengan JavaScript Asynchronous menggunakan panggilan balik, janji, dan async/menunggu?

Bekerja dengan JavaScript Asynchronous menggunakan panggilan balik

Panggil balik adalah cara yang paling asas untuk mengendalikan operasi tak segerak dalam JavaScript. Panggilan balik adalah fungsi yang diluluskan sebagai hujah kepada fungsi lain, yang kemudian dilaksanakan selepas operasi tidak segerak selesai. Ini bahagian "selepas" adalah penting kerana operasi tak segerak tidak menyekat benang utama.

Mari kita pertimbangkan contoh mudah mengambil data dari API:

 <code class="javascript">function fetchData(url, callback) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = function() { if (xhr.status >= 200 && xhr.status  { if (err) { console.error('Error fetching data:', err); } else { console.log('Data fetched:', data); } });</code>

Dalam contoh ini, fetchData adalah fungsi tak segerak. Fungsi callback dilaksanakan sebaik sahaja data diambil (atau ralat berlaku). Panggilan balik menerima dua argumen: objek ralat (atau null jika berjaya) dan data (atau null jika ralat berlaku). Corak ini, sementara berfungsi, boleh membawa kepada "panggil balik neraka" dengan panggilan balik yang sangat bersarang ketika berurusan dengan pelbagai operasi tak segerak.

Bekerja dengan JavaScript Asynchronous Menggunakan Janji

Janji memberikan cara yang lebih berstruktur dan bersih untuk mengendalikan operasi tak segerak. Janji mewakili hasil akhirnya operasi tidak segerak, yang boleh sama ada nilai yang diselesaikan atau alasan yang ditolak (ralat).

 <code class="javascript">function fetchDataPromise(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = function() { if (xhr.status >= 200 && xhr.status  console.log('Data fetched:', data)) .catch(err => console.error('Error fetching data:', err));</code>

Di sini, fetchDataPromise mengembalikan janji. Kaedah .then() mengendalikan nilai yang diselesaikan (kejayaan), dan kaedah .catch() mengendalikan alasan yang ditolak (ralat). Janji membuat kod asynchronous lebih mudah dibaca dan diselenggarakan, mengelakkan masalah bersarang panggilan balik.

Bekerja dengan JavaScript Asynchronous menggunakan Async/menunggu

Async/menunggu dibina atas janji-janji, menawarkan gaya yang lebih segerak untuk menulis kod asynchronous. Kata kunci async mengisytiharkan fungsi tak segerak, dan kata kunci await berhenti pelaksanaan sehingga janji menyelesaikan.

 <code class="javascript">async function fetchDataAsync(url) { try { const response = await fetch(url); if (!response.ok) { throw new Error(`Request failed with status ${response.status}`); } const data = await response.json(); return data; } catch (err) { console.error('Error fetching data:', err); throw err; // Re-throw the error for handling further up the call stack } } fetchDataAsync('https://api.example.com/data') .then(data => console.log('Data fetched:', data)) .catch(err => console.error('Error handling:', err));</code>

fetchDataAsync adalah fungsi tak segerak. await menunggu fetch untuk menyelesaikannya sebelum meneruskan. try...catch Block mengendalikan kesilapan yang berpotensi. Async/Await menjadikan kod tak segerak dibaca seperti kod segerak, meningkatkan kebolehbacaan dan kebolehkerjaan dengan ketara.

Apakah perbezaan utama antara panggilan balik, janji, dan async/menunggu dalam mengendalikan operasi tak segerak dalam JavaScript?

Panggil balik adalah pendekatan yang paling asas, menderita "neraka panggil balik" kerana struktur bersarang. Janji menawarkan cara yang lebih berstruktur menggunakan .then() dan .catch() , meningkatkan kebolehbacaan. Async/menunggu dibina atas janji-janji, menyediakan sintaks seperti segerak yang lebih bersih menggunakan async dan await , meningkatkan kebolehbacaan dan kebolehpasaran. Async/menunggu secara asasnya mengubah bagaimana operasi tidak segerak dikendalikan; Ia adalah gula sintaks yang dibina di atas janji -janji. Perbezaan utama terletak pada bagaimana kod itu ditulis dan kebolehbacaannya, bukan mekanisme asas.

Bagaimanakah saya boleh memilih pendekatan terbaik (panggilan balik, janji, atau async/menunggu) untuk menguruskan kod JavaScript asynchronous dalam senario yang berbeza?

• Callbacks: Secara umumnya dielakkan kecuali bekerja dengan kod warisan atau senario yang sangat mudah. Kerumitan dengan cepat meningkat dengan pelbagai operasi tak segerak.
• Janji: Pilihan yang baik untuk kebanyakan operasi tidak segerak. Mereka menyediakan cara berstruktur dan terkawal untuk mengendalikan kod tak segerak, terutamanya apabila berurusan dengan pelbagai operasi dirantai.
• Async/menunggu: Pendekatan pilihan untuk kebanyakan projek JavaScript moden. Ia meningkatkan kebolehbacaan dan menjadikan kod asynchronous lebih mudah difahami dan dikekalkan, terutamanya dalam senario kompleks. Walau bagaimanapun, ia bergantung kepada janji -janji di bawah tudung.

Apakah beberapa perangkap biasa untuk dielakkan apabila menggunakan panggilan balik, janji, dan async/menunggu untuk JavaScript tak segerak?

• Neraka Callback (Callbacks): Elakkan panggilan balik yang sangat bersarang. Gunakan janji atau async/menunggu untuk meningkatkan kebolehbacaan.
• Penolakan janji yang tidak diawasi (janji & async/menunggu): Sentiasa mengendalikan kesilapan yang berpotensi menggunakan .catch() atau try...catch blok. Penolakan yang tidak diingini boleh menyebabkan kegagalan senyap.
• Mengabaikan pengendalian ralat (ketiga): Sentiasa melaksanakan pengendalian ralat yang mantap. Semak kesilapan pada setiap langkah operasi tak segerak.
• Terlalu banyak async/menunggu (async/menunggu): Walaupun async/menunggu meningkatkan kebolehbacaan, berlebihan boleh menyebabkan kerumitan yang tidak perlu. Gunakannya dengan bijak.
• Keadaan kaum (ketiga): Berhati -hati dengan keadaan kaum, di mana perintah operasi tidak segerak. Mekanisme penyegerakan yang betul mungkin diperlukan dalam kes sedemikian.
• Deadlocks (ketiga): Dalam senario kompleks dengan pelbagai operasi tak segerak, berhati -hati tentang kebuntuan, di mana dua atau lebih operasi disekat selama -lamanya menunggu satu sama lain.

Dengan memahami pendekatan ini dan perangkap mereka, anda boleh menulis kod JavaScript yang tidak dapat dibaca, boleh dibaca, dan boleh dikekalkan.

Atas ialah kandungan terperinci Bagaimanakah saya bekerja dengan JavaScript Asynchronous menggunakan panggilan balik, janji, dan async/menunggu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!