JavaScript Asynchronous - Perjalanan dari Panggilan Balik ke Async Menunggu

Sebagai bahasa berutas tunggal, JavaScript sentiasa bergantung pada pengaturcaraan tak segerak untuk mengendalikan tugas yang memakan masa tanpa menyekat pelaksanaan kod. Selama bertahun-tahun, pendekatan untuk mengendalikan ketidaksegerakan dalam JavaScript telah berkembang dengan ketara, menjadi lebih mudah dibaca, terurus dan lebih mudah untuk difikirkan. Izinkan saya membawa anda menelusuri sejarah JavaScript tak segerak, daripada panggilan balik kepada janji untuk tidak segerak/menunggu.

JavaScript Segerak: Kelahiran

Pada hari-hari awal JavaScript, sebelum penggunaan panggilan balik yang meluas, kebanyakan kod JavaScript ditulis secara serentak. Kod segerak bermakna setiap operasi dilaksanakan satu demi satu, dalam cara menyekat. Apabila operasi yang berjalan lama ditemui, pelaksanaan keseluruhan skrip akan dijeda sehingga operasi itu selesai.

Bayangkan anda berada di kaunter tiket stesen kereta api dengan hanya seorang penjual tiket. Anda meminta tiket, dan penjual tiket mula memproses permintaan anda. Dalam model segerak, anda perlu menunggu di kaunter sehingga penjual tiket selesai memproses permintaan anda dan menyerahkan tiket kepada anda. Pada masa ini, tiada orang lain boleh dilayan, dan keseluruhan kaunter tiket disekat.

Berikut ialah contoh kod JavaScript segerak:

console.log("Before operation"); 

// Simulating a long-running operation 
for (let i = 0; i < 1000000000; i++) { 
// Performing some computation 
} 

console.log("After operation");

Dalam kod ini, pernyataan console.log akan dilaksanakan mengikut tertib dan operasi jangka panjang (gelung for) akan menyekat pelaksanaan skrip sehingga ia selesai. Mesej "Selepas operasi" hanya akan dilog selepas gelung selesai.

Masalah dengan Kod Segerak

Walaupun kod segerak mudah difahami dan difikirkan, ia menimbulkan beberapa masalah, terutamanya apabila berurusan dengan operasi yang memakan masa:

1. Pelaksanaan Menyekat: Operasi yang berjalan lama menyekat pelaksanaan keseluruhan skrip, menjadikan halaman web atau aplikasi tidak bertindak balas sehingga operasi selesai.
2. Pengalaman Pengguna Yang Lemah: Penyekatan pelaksanaan boleh membawa kepada pengalaman pengguna yang buruk, kerana pengguna perlu menunggu operasi selesai sebelum berinteraksi dengan aplikasi.
3. Penggunaan Sumber Tidak Cekap: Kod segerak tidak membenarkan penggunaan sumber sistem dengan cekap, kerana ia tidak dapat melaksanakan tugas lain sementara menunggu operasi selesai.

Untuk mengatasi batasan kod segerak dan memberikan pengalaman pengguna yang lebih baik, teknik pengaturcaraan tak segerak telah diperkenalkan. Pengaturcaraan tak segerak membolehkan operasi berjalan lama dilaksanakan di latar belakang tanpa menyekat pelaksanaan kod yang lain dan begitulah cara panggil balik diperkenalkan.

Panggilan Balik: Zaman Awal

Panggil balik ialah cara utama untuk mengendalikan operasi tak segerak. Panggilan balik hanyalah fungsi yang dihantar sebagai hujah kepada fungsi lain, untuk dilaksanakan kemudian setelah operasi tak segerak selesai.

Bayangkan anda ingin membeli tiket kereta api. Anda pergi ke kaunter tiket di stesen kereta api dan meminta tiket untuk destinasi tertentu. Penjual tiket mengambil permintaan anda dan meminta anda menunggu sementara mereka menyemak ketersediaan tempat duduk di dalam kereta api. Anda memberikan mereka maklumat hubungan anda dan tunggu di ruang menunggu. Setelah penjual tiket memproses permintaan anda dan tempat duduk tersedia, mereka memanggil nama anda untuk memberitahu anda bahawa tiket anda sedia untuk diambil. Dalam analogi ini, maklumat hubungan anda ialah panggilan balik - satu cara untuk penjual tiket memberitahu anda apabila tugas tak segerak (menyemak ketersediaan tempat duduk dan mengeluarkan tiket) selesai.

Begini cara analogi berkaitan dengan panggilan balik dalam JavaScript:

• Meminta tiket kereta api adalah seperti memanggil fungsi tak segerak yang mengambil panggilan balik sebagai hujah.
• Memberi maklumat hubungan anda kepada penjual tiket adalah seperti menghantar fungsi panggil balik kepada fungsi tak segerak.
• Penjual tiket menyemak ketersediaan tempat duduk dan memproses permintaan anda adalah seperti operasi tak segerak yang sedang dilaksanakan.
• Penjual tiket memanggil nama anda apabila tiket sedia adalah seperti fungsi panggil balik yang digunakan dengan hasil operasi tak segerak.
• Anda menunggu di ruang menunggu adalah seperti pelaksanaan kod anda yang lain berterusan semasa operasi tak segerak sedang diproses.

Dalam pendekatan panggil balik, anda menyediakan fungsi (panggilan balik) yang akan dipanggil setelah operasi tak segerak selesai. Fungsi tak segerak melaksanakan tugasnya dan kemudian memanggil panggilan balik dengan hasil atau ralat, membenarkan kod anda mengendalikan hasil operasi tak segerak.

Berikut ialah contoh membuat panggilan API menggunakan panggilan balik dalam Node.js:

console.log("Before operation"); 

// Simulating a long-running operation 
for (let i = 0; i < 1000000000; i++) { 
// Performing some computation 
} 

console.log("After operation");

Dalam contoh ini, kami mempunyai fungsi fetchData yang mensimulasikan panggilan API. Ia memerlukan parameter url dan fungsi panggil balik sebagai argumen. Di dalam fungsi, kami menggunakan setTimeout untuk mensimulasikan kelewatan 1000 milisaat (1 saat) sebelum menggunakan fungsi panggil balik.

Fungsi panggil balik mengikut konvensyen biasa untuk menerima ralat sebagai argumen pertama (err) dan data sebagai argumen kedua (data). Dalam contoh ini, kami mensimulasikan panggilan API yang berjaya dengan menetapkan ralat kepada null dan menyediakan objek data sampel.

Untuk menggunakan fungsi fetchData, kami memanggilnya dengan URL dan fungsi panggil balik. Di dalam fungsi panggil balik, kami mula-mula menyemak sama ada ralat berlaku dengan menyemak argumen err. Jika ralat wujud, kami log masuk ke konsol menggunakan console.error dan kembali untuk menghentikan pelaksanaan selanjutnya.

Jika tiada ralat berlaku, kami log data yang diterima ke konsol menggunakan console.log.

Apabila anda menjalankan kod ini, ia akan mensimulasikan panggilan API tak segerak. Selepas kelewatan 1 saat, fungsi panggil balik akan digunakan dan hasilnya akan dilog masuk ke konsol:

{ id: 1, nama: 'John Doe' }

Contoh ini menunjukkan cara panggil balik boleh digunakan untuk mengendalikan panggilan API tak segerak. Fungsi panggil balik dihantar sebagai hujah kepada fungsi tak segerak (fetchData), dan ia digunakan sebaik sahaja operasi tak segerak selesai, sama ada dengan ralat atau data yang terhasil.

Semasa panggilan balik menyelesaikan tugas, ia mempunyai beberapa kelemahan:

1. Neraka Panggilan Balik/ Piramid Azab: Bersarang berbilang operasi tak segerak membawa kepada kod bersarang dan inden yang mendalam, menjadikannya sukar untuk dibaca dan diselenggara.
2. Pengendalian Ralat: Mengendalikan ralat pada setiap peringkat bersarang adalah menyusahkan dan selalunya membawa kepada kod berulang.
3. Kurang Kebolehbacaan: Sifat panggilan balik bukan linear menjadikan kod lebih sukar untuk diikuti dan difikirkan.

Janji: Satu Langkah Ke Hadapan

Untuk menangani cabaran dengan panggilan balik, janji telah diperkenalkan dalam ES6 (ECMAScript 2015). Janji mewakili penyiapan atau kegagalan operasi tak segerak dan membolehkan anda merantai operasi bersama-sama.

Anggap janji sebagai tiket kereta api. Apabila anda membeli tiket kereta api, tiket itu mewakili janji oleh syarikat kereta api bahawa anda akan dapat menaiki kereta api dan sampai ke destinasi anda. Tiket itu mengandungi maklumat tentang kereta api, seperti masa berlepas, laluan dan nombor tempat duduk. Sebaik sahaja anda mempunyai tiket, anda boleh menunggu ketibaan kereta api, dan apabila ia bersedia untuk menaiki kereta api, anda boleh menaiki kereta api menggunakan tiket anda.

Dalam analogi ini, tiket kereta api adalah janji. Ia mewakili penyiapan akhirnya operasi tak segerak (perjalanan kereta api). Anda memegang tiket (objek janji) sehingga kereta api bersedia (operasi tak segerak selesai). Setelah janji diselesaikan (kereta api tiba), anda boleh menggunakan tiket untuk menaiki kereta api (akses nilai yang telah diselesaikan).

Begini cara analogi itu berkaitan dengan janji dalam JavaScript:

• Membeli tiket kereta api adalah seperti memanggil fungsi tak segerak yang mengembalikan janji.
• Tiket kereta api itu sendiri ialah objek yang dijanjikan, mewakili hasil masa depan operasi tak segerak.
• Menunggu keretapi tiba adalah seperti menunggu janji diselesaikan atau ditolak.
• Naik kereta api dengan tiket adalah seperti menggunakan .then() untuk mengakses nilai janji yang telah diselesaikan.
• Jika kereta api dibatalkan (ralat berlaku), ia seperti janji ditolak, dan anda akan mengendalikannya dengan .catch().

Janji menyediakan cara berstruktur untuk mengendalikan operasi tak segerak, membolehkan anda merantai berbilang operasi bersama-sama dan menangani ralat dengan cara yang lebih terurus, sama seperti cara tiket kereta api membantu anda mengatur dan mengurus perjalanan kereta api anda.

Berikut ialah contoh membuat panggilan API menggunakan janji:

console.log("Before operation"); 

// Simulating a long-running operation 
for (let i = 0; i < 1000000000; i++) { 
// Performing some computation 
} 

console.log("After operation");

Dalam kod ini, fungsi fetchData mengembalikan janji. Pembina janji mengambil fungsi yang menerima dua hujah: selesaikan dan tolak. Fungsi ini digunakan untuk mengawal keadaan janji.

Di dalam pembina janji, kami mensimulasikan panggilan API menggunakan setTimeout, sama seperti dalam contoh sebelumnya. Walau bagaimanapun, daripada menggunakan fungsi panggil balik, kami menggunakan fungsi menyelesaikan dan menolak untuk mengendalikan hasil tak segerak.

Jika ralat berlaku (dalam contoh ini, kami mensimulasikannya dengan menyemak pembolehubah ralat), kami memanggil fungsi tolak dengan ralat, menunjukkan bahawa janji harus ditolak.

Jika tiada ralat berlaku, kami memanggil fungsi menyelesaikan dengan data, menunjukkan bahawa janji harus diselesaikan dengan data yang diterima.

Untuk menggunakan fungsi fetchData, kami rantaikan kaedah .then() dan .catch() kepada panggilan fungsi. Kaedah .then() digunakan untuk mengendalikan nilai janji yang diselesaikan, manakala kaedah .catch() digunakan untuk mengendalikan sebarang ralat yang mungkin berlaku.

Jika janji berjaya diselesaikan, kaedah .then() digunakan dengan data yang diselesaikan dan kami logkannya ke konsol menggunakan console.log.

Jika ralat berlaku dan janji ditolak, kaedah .catch() digunakan dengan objek err dan kami logkannya ke konsol menggunakan console.error.

Menggunakan janji menyediakan cara yang lebih berstruktur dan boleh dibaca untuk mengendalikan operasi tak segerak berbanding dengan panggilan balik. Janji membolehkan anda merantai berbilang operasi tak segerak bersama menggunakan .then() dan mengendalikan ralat dengan cara yang lebih terpusat menggunakan .catch().

Janji dipertingkatkan apabila panggilan balik dalam beberapa cara:

1. Perantaian: Janji membenarkan anda merantai berbilang operasi tak segerak bersama-sama menggunakan .then, menjadikan kod lebih mudah dibaca dan lebih mudah untuk diikuti.
2. Pengendalian Ralat: Janji menyediakan kaedah .catch untuk menangani ralat dengan cara yang lebih terpusat dan diperkemas.
3. Kebolehbacaan: Janji membuat kod tak segerak kelihatan lebih seperti kod segerak, meningkatkan kebolehbacaan.

Walau bagaimanapun, janji masih mempunyai beberapa batasan. Merangkai pelbagai janji masih boleh membawa kepada kod bersarang dalam dan sintaksnya tidak sebersih mungkin.

Async/Await: Pendekatan Moden

Async/wait, yang diperkenalkan dalam ES8 (ECMAScript 2017), dibina di atas janji dan menyediakan cara yang kelihatan lebih segerak untuk menulis kod tak segerak.

Dengan async/menunggu, anda boleh menulis kod tak segerak yang kelihatan dan berkelakuan seperti kod segerak. Ia seperti mempunyai pembantu peribadi yang pergi ke kaunter tiket untuk anda. Anda hanya menunggu pembantu anda pulang dengan tiket, dan apabila mereka pulang, anda boleh meneruskan perjalanan anda.

Berikut ialah contoh membuat panggilan API menggunakan async/await:

console.log("Before operation"); 

// Simulating a long-running operation 
for (let i = 0; i < 1000000000; i++) { 
// Performing some computation 
} 

console.log("After operation");

Dalam kod ini, kami mempunyai fungsi async dipanggil fetchData yang mengambil parameter url yang mewakili titik akhir API. Di dalam fungsi, kami menggunakan blok cuba/tangkap untuk mengendalikan sebarang ralat yang mungkin berlaku semasa permintaan API.

Kami menggunakan kata kunci await sebelum fungsi ambil untuk menjeda pelaksanaan sehingga janji yang dikembalikan oleh pengambilan diselesaikan. Ini bermakna fungsi akan menunggu sehingga permintaan API selesai sebelum beralih ke baris seterusnya.

Setelah respons diterima, kami menggunakan await response.json() untuk menghuraikan badan respons sebagai JSON. Ini juga merupakan operasi tak segerak, jadi kami menggunakan await untuk menunggu penghuraian selesai.

Jika permintaan API dan penghuraian JSON berjaya, data dikembalikan daripada fungsi fetchData.

Jika sebarang ralat berlaku semasa permintaan API atau penghuraian JSON, ia ditangkap oleh blok tangkapan. Kami log ralat ke konsol menggunakan console.error dan buang semula ralat menggunakan throw err untuk menyebarkannya kepada pemanggil.

Untuk menggunakan fungsi fetchData, kami mempunyai fungsi async yang dipanggil utama. Di dalam main, kami menentukan url titik akhir API yang ingin kami ambil data.

Kami menggunakan await fetchData(url) untuk memanggil fungsi fetchData dan menunggu untuk mengembalikan data. Jika permintaan API berjaya, kami log data yang diterima ke konsol.

Jika sebarang ralat berlaku semasa permintaan API, ia ditangkap oleh blok tangkapan dalam fungsi utama. Kami log ralat ke konsol menggunakan console.error.

Akhir sekali, kami memanggil fungsi utama untuk memulakan pelaksanaan program.

Apabila anda menjalankan kod ini, ia akan membuat permintaan API tak segerak ke URL yang ditentukan menggunakan fungsi ambil. Jika permintaan itu berjaya, data yang diterima akan dilog masuk ke konsol. Jika ralat berlaku, ia akan ditangkap dan direkodkan juga.

Menggunakan async/wait dengan fungsi fetch menyediakan cara yang bersih dan boleh dibaca untuk mengendalikan permintaan API tak segerak. Ia membolehkan anda menulis kod tak segerak yang kelihatan dan berkelakuan seperti kod segerak, menjadikannya lebih mudah untuk difahami dan diselenggara.

Async/wait menyediakan beberapa faedah:

1. Kod Ringkas: Async/wait membolehkan anda menulis kod tak segerak yang kelihatan dan terasa seperti kod segerak, menjadikannya lebih ringkas dan boleh dibaca.
2. Pengendalian Ralat: Async/tunggu menggunakan blok cuba/tangkap untuk pengendalian ralat, yang merupakan cara yang lebih biasa dan intuitif untuk mengendalikan ralat berbanding dengan .catch with promises.
3. Kebolehbacaan: Async/wait menjadikan kod tak segerak lebih mudah difahami dan difikirkan, terutamanya untuk pembangun yang biasa dengan pengaturcaraan segerak.

Kesimpulan

Kesimpulannya, evolusi JavaScript tak segerak, daripada panggilan balik kepada janji kepada tak segerak/menunggu, telah menjadi satu perjalanan ke arah kod tak segerak yang lebih mudah dibaca, terurus dan boleh diselenggara. Setiap langkah telah dibina berdasarkan langkah sebelumnya, menangani batasan dan meningkatkan pengalaman pembangun.

Hari ini, async/wait digunakan secara meluas dan telah menjadi cara pilihan untuk mengendalikan operasi tak segerak dalam JavaScript. Ia membolehkan pembangun menulis kod tak segerak yang bersih, ringkas dan mudah difahami, menjadikannya alat yang berharga dalam setiap kotak alat pembangun JavaScript.

Atas ialah kandungan terperinci JavaScript Asynchronous - Perjalanan dari Panggilan Balik ke Async Menunggu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!