Pengaturcaraan tak segerak ialah aspek utama JavaScript yang membolehkan pembangun melaksanakan permintaan rangkaian yang panjang, operasi fail dan tugasan lain yang memakan masa tanpa menyekat urutan utama. Ini memastikan aplikasi kekal responsif dan mesra pengguna. JavaScript menyediakan tiga cara utama untuk mengendalikan operasi tak segerak: Panggilan Balik, Janji dan Async/Await. Dalam artikel ini, kita akan menyelidiki setiap kaedah ini, meneroka sintaks, penggunaan dan perbezaannya melalui contoh terperinci.
Dalam JavaScript, operasi yang mengambil masa untuk diselesaikan, seperti mengambil data daripada pelayan, membaca fail atau melakukan pengiraan, boleh dikendalikan secara tidak segerak. Ini bermakna semasa menunggu operasi selesai, enjin JavaScript boleh terus melaksanakan tugas lain. Ini penting untuk mencipta pengalaman pengguna yang cekap dan lancar dalam aplikasi web.
Panggil balik ialah salah satu kaedah terawal untuk mengendalikan operasi tak segerak dalam JavaScript. Panggilan balik hanyalah fungsi yang dihantar sebagai hujah kepada fungsi lain, yang akan dilaksanakan sebaik sahaja operasi tak segerak selesai.
function fetchData(callback) { setTimeout(() => { callback("Data fetched!"); }, 1000); } function displayData(data) { console.log(data); } fetchData(displayData);
Dalam contoh di atas, fetchData mensimulasikan operasi tak segerak menggunakan setTimeout. Selepas 1 saat, ia memanggil fungsi displayData, menghantar data yang diambil sebagai hujah.
Kelebihan:
Kelemahan:
Janji telah diperkenalkan dalam ES6 (ECMAScript 2015) untuk menangani isu yang berkaitan dengan panggilan balik. Janji mewakili operasi yang belum selesai tetapi dijangka pada masa hadapan. Ia boleh berada dalam salah satu daripada tiga keadaan: belum selesai, dipenuhi atau ditolak.
function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("Data fetched!"); }, 1000); }); } fetchData() .then(data => { console.log(data); }) .catch(error => { console.error("Error:", error); });
Dalam contoh ini, fetchData mengembalikan Janji yang diselesaikan dengan "Data diambil!" selepas 1 saat. Kaedah kemudian digunakan untuk mengendalikan nilai yang diselesaikan, dan tangkapan digunakan untuk mengendalikan sebarang ralat.
Janji boleh dirantai untuk melaksanakan satu siri operasi tak segerak mengikut turutan.
function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("Data fetched!"); }, 1000); }); } function processData(data) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(`${data} Processed!`); }, 1000); }); } fetchData() .then(data => { console.log(data); return processData(data); }) .then(processedData => { console.log(processedData); }) .catch(error => { console.error("Error:", error); });
Dalam contoh ini, processData dipanggil selepas fetchData, dan hasilnya dikendalikan mengikut urutan menggunakan kemudian.
Kelebihan:
Kelemahan:
Async/Await, yang diperkenalkan pada ES2017, menyediakan cara yang lebih mudah dibaca dan ringkas untuk menulis kod tak segerak menggunakan Promises. Kata kunci async digunakan untuk mentakrifkan fungsi tak segerak dan kata kunci tunggu digunakan untuk menjeda pelaksanaan sehingga Janji diselesaikan.
async function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("Data fetched!"); }, 1000); }); } async function displayData() { const data = await fetchData(); console.log(data); } displayData();
Dalam contoh ini, displayData ialah fungsi tak segerak yang menunggu fetchData selesai sebelum mengelog data.
Ralat pengendalian dengan Async/Await boleh dilakukan menggunakan blok cuba/tangkap.
async function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { reject("Failed to fetch data!"); }, 1000); }); } async function displayData() { try { const data = await fetchData(); console.log(data); } catch (error) { console.error("Error:", error); } } displayData();
Di sini, jika fetchData gagal, ralat akan ditangkap dan dilog oleh blok tangkapan.
Kelebihan:
Kelemahan:
Pengaturcaraan tak segerak dalam JavaScript adalah penting untuk membina aplikasi yang responsif dan cekap. Memahami perbezaan antara Panggilan Balik, Janji dan Async/Await membolehkan pembangun memilih alat yang betul untuk kes penggunaan khusus mereka. Walaupun Panggilan Balik ialah bentuk paling mudah untuk mengendalikan operasi tak segerak, ia boleh membawa kepada kod yang tidak kemas. Janji menawarkan pendekatan yang lebih berstruktur, tetapi Async/Await menyediakan penyelesaian yang paling elegan dan boleh dibaca. Dengan mengikuti amalan terbaik dan memahami alatan ini, pembangun boleh menulis kod tak segerak yang bersih, boleh diselenggara dan cekap.
Atas ialah kandungan terperinci Pengaturcaraan Asynchronous dalam JavaScript: Panggilan Balik lwn Janji lwn Async/Await. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!