Menguasai JavaScript Asynchronous: Panggilan Balik, Janji dan Async/Await Simplified

JavaScript Asynchronous: Daripada Panggilan Balik ke Janji dan Async/Await

pengenalan

JavaScript ialah bahasa pengaturcaraan satu benang yang berkuasa digunakan secara meluas untuk pembangunan web. Cabaran biasa dalam JavaScript ialah mengendalikan tugas tak segerak, seperti mengambil data daripada API atau melaksanakan operasi sensitif masa, tanpa menyekat urutan utama. Dari masa ke masa, pembangun telah beralih daripada menggunakan panggilan balik kepada janji dan kini sintaks async/menunggu yang lebih elegan untuk mengurus operasi tak segerak. Panduan ini akan membawa anda melalui konsep ini langkah demi langkah, bermula dari asas dan membina senario lanjutan. Pada akhirnya, anda akan dapat menggunakan JavaScript tak segerak dengan yakin dalam aplikasi dunia nyata.

---

Apakah Pengaturcaraan Asynchronous?

Dalam JavaScript, tugas seperti mengambil data daripada pelayan, membaca fail atau menetapkan tamat masa boleh mengambil masa untuk diselesaikan. Daripada menunggu tugasan ini selesai (yang akan menyekat pelaksanaan seluruh program), JavaScript membenarkan tugasan tersebut dijalankan secara tidak segerak. Ini bermakna ia dikendalikan secara bebas daripada aliran program utama, membenarkan kod lain untuk dilaksanakan tanpa berlengah-lengah.

---

Memahami Panggilan Balik: Titik Permulaan

Apakah Panggilan Balik?

panggilan balik ialah fungsi yang dihantar sebagai hujah kepada fungsi lain. Apabila fungsi pertama menyelesaikan operasinya, ia melaksanakan fungsi panggil balik untuk menandakan selesai.

Contoh Panggilan Balik: Memahami Asas

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

Penjelasan:

1. fetchData mensimulasikan pengambilan data dengan kelewatan.
2. Selepas kelewatan, ia melaksanakan fungsi panggil balik (processData), menunjukkan bahawa data sudah sedia.

---

Panggilan Balik Neraka: Masalahnya

Menggunakan panggil balik bersarang untuk mengendalikan berbilang tugas tak segerak boleh membawa kepada kod yang tidak boleh dibaca dan sukar diselenggara dengan cepat.

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

"Piramid azab" ini menyukarkan penyahpepijatan dan penyelenggaraan kod.

---

Janji: Alternatif yang Lebih Baik

Apakah Janji?

janji ialah objek yang mewakili nilai yang mungkin tersedia sekarang, pada masa hadapan, atau tidak sama sekali. Janji mempunyai tiga keadaan:

• Belum selesai: Keadaan awal, tidak dipenuhi atau ditolak.
• Dipenuhi: Operasi berjaya diselesaikan.
• Ditolak: Operasi gagal.

Contoh Janji: Menulis Semula Panggilan Balik Neraka

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

Faedah Janji

1. Kebolehbacaan dipertingkat dengan rantaian.
2. Pengendalian ralat terbina dalam menggunakan .catch().
3. Mengelakkan panggilan balik bersarang dalam.

---

Async/Await: Keanggunan Moden

Apakah Async/Await?

async/wait ialah gula sintaktik atas janji, diperkenalkan pada ES2017. Ia menjadikan kod tak segerak kelihatan segerak, meningkatkan kebolehbacaan dan kebolehselenggaraan.

Async/Await Contoh: Mempermudahkan Janji

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

Bagaimana Ia Berfungsi

1. kata kunci tak segerak: Mengisytiharkan fungsi sebagai tak segerak.
2. tunggu kata kunci: Menjeda pelaksanaan fungsi sehingga janji diselesaikan atau ditolak.

Faedah Async/Await

1. Kod berurutan dan boleh dibaca.
2. Ralat mengendalikan dengan cuba...tangkap.
3. Mengurangkan kerumitan panggil balik.

---

Mengendalikan Senario Dunia Sebenar Dengan Async/Await

Perlaksanaan Selari: Janji.semua

Apabila anda perlu melaksanakan berbilang tugas tak segerak bebas secara selari:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("Data fetched!");
            resolve("Fetched data");
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Processing: ${data}`);
            resolve("Processed data");
        }, 1000);
    });
}

function saveData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Saving: ${data}`);
            resolve("Data saved");
        }, 1000);
    });
}

// Chaining Promises
fetchData()
    .then((data) => processData(data))
    .then((processedData) => saveData(processedData))
    .then((finalResult) => console.log(finalResult))
    .catch((error) => console.error("Error:", error));

Pengendalian Ralat: cuba...catch vs .catch()

Urus ralat dengan betul dengan cuba...tangkap untuk fungsi tak segerak:

async function handleData() {
    try {
        const fetchedData = await fetchData();
        const processedData = await processData(fetchedData);
        const savedData = await saveData(processedData);
        console.log(savedData);
    } catch (error) {
        console.error("Error:", error);
    }
}

handleData();

---

Soalan Lazim Lazim Mengenai JavaScript Asynchronous

Apa Berlaku Jika Saya Terlupa menunggu?

Fungsi mengembalikan janji dan bukannya nilai yang diselesaikan. Ini mungkin membawa kepada tingkah laku yang tidak dijangka.

async function fetchAllData() {
    const task1 = fetchData();
    const task2 = fetchData();
    const results = await Promise.all([task1, task2]);
    console.log("All data fetched:", results);
}
fetchAllData();

Bolehkah saya Menggunakan Async/Menunggu Tanpa Janji?

Tidak, tunggu berfungsi secara eksklusif dengan janji. Walau bagaimanapun, perpustakaan seperti fetch dan API fs.promises Node.js menyediakan kaedah berasaskan janji asli.

Bilakah Saya Harus Menggunakan Panggilan Balik?

Panggil balik masih berguna untuk tugasan kecil dan mudah atau apabila bekerja dengan API lama yang tidak menyokong janji.

---

Kesimpulan

Menguasai JavaScript tak segerak adalah penting untuk mana-mana pembangun yang bekerja dengan aplikasi web moden. Bermula dengan panggilan balik, anda boleh menghargai cara janji dan async/menunggu memudahkan kod tak segerak dan meningkatkan kebolehbacaan. Gunakan panggilan balik dengan berhati-hati, manfaatkan janji untuk pengendalian ralat yang lebih baik dan terima async/tunggu untuk kod yang bersih dan intuitif. Berbekalkan alatan ini, anda akan bersedia untuk menangani sebarang cabaran tak segerak dalam projek anda.

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