Menguasai JavaScript Asynchronous: Janji, Async/Await dan Callback Dijelaskan

JavaScript adalah serba boleh dan responsif; mengetahui cara menggunakan tak segerak menghasilkan yang terbaik. Daripada mengambil hasil API kepada memuatkan fail, pembangunan async membolehkan kami melakukan berbilang perkara serentak, tanpa menyekat. Kami akan meneroka tiga pendekatan berbeza untuk menulis kod tak segerak dalam JavaScript: Promises, Async/Await dan Callbacks-memahami bila hendak digunakan dan cara melaksanakan setiap satu.

Mengapa JavaScript Asynchronous?

Bayangkan aplikasi web anda membeku setiap kali ia menarik data daripada API atau menunggu fail imej besar dimuat turun. Bukan kes terbaik, bukan? Di situlah JavaScript tak segerak masuk. Ia membolehkan program anda terus berjalan sambil menunggu beberapa tugas selesai, justeru menjadikan pengalaman pengguna yang lebih lancar.

1. Memahami Panggilan Balik Panggilan balik ialah fungsi yang dihantar sebagai hujah kepada fungsi lain, yang membolehkan anda menjalankan fungsi setelah tugas async selesai. Panggilan balik adalah antara teknik tertua untuk mengendalikan operasi async dalam JavaScript.

Contoh: Panggilan Balik Asas

fungsi fetchData(panggilan balik) {
setTimeout(() => {
console.log("Data diambil");
panggil balik();
}, 2000);
}

fungsi processData() {
console.log("Memproses data.");
}

fetchData(processData);
Dalam contoh ini, fetchData menunggu dua saat dan kemudian memanggil processData sebaik sahaja ia selesai. Ini berfungsi dengan baik untuk senario mudah, tetapi jika anda mula menyusun beberapa panggilan balik, anda boleh memasukkan "neraka panggil balik" di mana panggilan balik bersarang dalam menjadikan kod anda sukar dibaca dan diselenggara.

Petua: Jika anda mendapati diri anda mempunyai lebih daripada tiga panggilan balik bersarang, pertimbangkan untuk beralih kepada Promises atau Async/Await.

1. Janji: Cara yang Lebih Baik untuk Mengendalikan Async Janji ialah objek yang mewakili penyiapan akhirnya (atau kegagalan) operasi tak segerak. Daripada menggunakan bersarang, Promises menyediakan kaedah .then() dan .catch() yang menjadikannya lebih mudah dibaca.

Contoh: Menggunakan Janji

fungsi fetchData() {
kembalikan Janji baharu((selesaikan, tolak) => {
setTimeout(() => {
resolve("Data berjaya diambil!");
}, 2000);
});
}

fetchData()
.then((message) => {
console.log(message);
kembalikan "Memproses data.";
})
.then((processingMessage) => {
console.log(processingMessage);
})
.catch((error) => {
console.error("Ralat:", ralat);
});
Di sini dengan setiap .then(), tugas boleh dikendalikan secara berurutan, yang boleh lebih mudah dibaca berbanding panggilan balik bersarang dalam. Janji juga mengendalikan ralat dengan lebih elegan dan membolehkan anda mengendalikannya di satu tempat dengan .catch().

Petua: Gunakan Janji apabila anda perlu melaksanakan beberapa tugasan dalam urutan, satu demi satu, dengan tugasan sebelumnya selesai.

1. Async/Await: Pendekatan Moden Async dan sintaks menunggu muncul dalam ES8 yang menyediakan cara yang lebih bersih untuk bekerja dengan Promises. Ia membolehkan anda menulis kod tak segerak sama seperti ia akan segerak, justeru lebih mudah dibaca.

Contoh: Async/Await

fungsi async fetchData() {
cuba {
data const = tunggu Janji baru((selesai) =>
setTimeout(() => resolve("Data berjaya diambil!"), 2000);
});
console.log(data);

const processMessage = await new Promise((resolve) => {
  setTimeout(() => resolve("Processing data."), 1000);
});
console.log(processMessage);

} tangkapan (ralat) {
console.error("Ralat:", ralat);
}
}

fetchData();
Dengan async dan menunggu, anda mengelak daripada merantai .then() panggilan supaya kod kelihatan sangat serupa dengan kod segerak. Ini adalah amalan terbaik untuk kebolehbacaan terutamanya apabila operasi yang terlibat adalah kompleks.

Amalan Terbaik: Ia sangat boleh dibaca dan, oleh itu, sentiasa pendekatan terbaik menggunakan Async/Tunggu bila dan di mana mungkin dalam aplikasi JavaScript moden anda.

Di Mana Guna Mana

Panggil balik: Gunakan untuk tugasan kecil yang tidak rumit dan kebolehbacaan bukan masalah. Jarang digunakan untuk panggilan tak segerak yang mudah.

Janji: Ia sangat sesuai untuk pengendalian ralat dan proses berjujukan. Janji membolehkan anda mengelakkan kod yang tidak kemas dengan panggilan balik bersarang dalam.

Async/ Await: Lebih baik untuk kebolehbacaan dan kod yang lebih bersih apabila ia datang untuk melaksanakan operasi dalam urutan.

Petua Akhir untuk Menguasai JavaScript Async
Cuba setiap kaedah: Semakin banyak anda mempraktikkan setiap kaedah, semakin baik anda memahami pengaturcaraan async dan mengetahui masa untuk menggunakannya.

Kendalikan ralat dengan berhati-hati: Dalam kedua-dua Promise dan Async/Await, gunakan pengendalian ralat sama ada dengan .catch() atau try.catch.

Pengoptimuman prestasi: Untuk tugasan yang boleh dijalankan selari, gunakan Promise.all untuk menjalankannya selari.

Bersedia untuk menyelam dalam-dalam? Cuba laksanakan teknik async dalam projek anda untuk melihat perbezaan yang dibuatnya. Menguasai pengaturcaraan async akan membawa kemahiran JavaScript anda ke peringkat seterusnya dan akan membantu anda mencipta aplikasi yang licin dan responsif.

Atas ialah kandungan terperinci Menguasai JavaScript Asynchronous: Janji, Async/Await dan Callback Dijelaskan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!