Memahami Pengaturcaraan Asynchronous JavaScript: Panggilan Balik, Janji dan Async/Await

Sifat tak segerak JavaScript adalah penting untuk mencipta apl yang mesra pengguna, responsif dan cekap. Memahami idea asas pengaturcaraan tak segerak, seperti panggilan balik, janji dan async/menunggu, adalah penting untuk navigasi yang berjaya. Manual ini akan mengupas idea ini dan mengkaji aplikasi, kelebihan dan kelemahannya.

---

Asynchronous vs Synchronous Programming

Pengaturcaraan Segerak:

• Dalam pengaturcaraan segerak, tugasan dilaksanakan secara berurutan. Program menunggu tugasan selesai sebelum beralih ke tugasan seterusnya.
• Pendekatan ini boleh membawa kepada ketidakcekapan, terutamanya semasa operasi yang memakan masa seperti permintaan rangkaian atau pemprosesan fail.

Contoh Kod Segerak:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

Pengaturcaraan Tak Segerak:

• Pengaturcaraan tak segerak membolehkan tugasan dijalankan secara bebas, membolehkan atur cara terus melaksanakan operasi lain sementara menunggu beberapa tugasan selesai.
• Ini amat berguna untuk tugas seperti mengambil data daripada pelayan, di mana menunggu boleh membekukan antara muka pengguna.

---

Mengapa Kita Memerlukan Pengaturcaraan Asynchronous?

1. Responsif: Menghalang UI daripada menjadi tidak responsif semasa operasi yang lama.
2. Kecekapan: Membolehkan pelaksanaan serentak berbilang operasi, mengoptimumkan penggunaan sumber.
3. Pengalaman Pengguna: Meningkatkan interaksi dengan memastikan aliran kerja lancar dan tidak terganggu.

---

Panggilan balik

Definisi: Panggilan balik ialah fungsi yang dihantar sebagai hujah kepada fungsi lain, dilaksanakan selepas selesai tugasan.

Contoh:

function fetchData(callback) {
    console.log("Fetching data...");
    setTimeout(() => {
        const data = "Data received"; // Simulate fetched data
        callback(data); // Execute the callback with the data
    }, 2000);
}

fetchData((data) => {
    console.log(data); // Logs after data is fetched
});

Penjelasan:

• Fungsi fetchData mensimulasikan kelewatan menggunakan setTimeout.
• Setelah kelewatan tamat, panggilan balik dilaksanakan dengan data yang diambil.

Isu dengan Panggilan Balik:

• Neraka Panggilan Balik: Apabila berbilang operasi tak segerak bergantung antara satu sama lain, panggilan balik bersarang dalam menjadikan kod sukar dibaca dan diselenggara.

---

Janji

Definisi: Janji ialah objek yang mewakili penyiapan (atau kegagalan) operasi tak segerak dan nilai yang terhasil.

Faedah:

• Memudahkan merantai operasi tak segerak.
• Memberikan pengendalian ralat yang lebih baik berbanding dengan panggilan balik.

Contoh:

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data...");
        setTimeout(() => {
            const data = "Data received";
            resolve(data); // Resolve the promise with data
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // Logs after promise is resolved
    })
    .catch(error => {
        console.error(error); // Handles errors
    });

Penjelasan:

• Janji meningkatkan kebolehbacaan dengan merantai .then() untuk kejayaan dan .catch() untuk pengendalian ralat.
• Ia menghapuskan struktur bersarang tipikal panggilan balik.

---

Async/Tunggu

Definisi: Async/wait ialah gula sintaktik yang dibina di atas janji, membolehkan anda menulis kod tak segerak yang kelihatan dan berkelakuan lebih seperti kod segerak.

Faedah:

• Meningkatkan kebolehbacaan dan kebolehselenggaraan kod.
• Mengendalikan logik tak segerak dengan lebih mudah.

Contoh:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

Penjelasan:

• Kata kunci tak segerak menunjukkan fungsi mengandungi kod tak segerak.
• Kata kunci menunggu menjeda pelaksanaan sehingga janji diselesaikan, menjadikan kod kelihatan segerak sambil kekal tidak disekat.

---

Ringkasan Perkara Utama

1. Segerak lwn. Tak segerak:

   • Kod segerak menyekat pelaksanaan sehingga tugasan selesai.
   • Kod tak segerak membenarkan tugasan lain dilaksanakan secara serentak.

2. Panggilan balik:

   • Fungsi diluluskan untuk mengendalikan hasil tak segerak.
   • Terdedah kepada neraka panggil balik dengan kebergantungan yang kompleks.

3. Janji:

   • Alternatif yang lebih bersih kepada panggilan balik, menyokong rantaian dan pengendalian ralat.

4. Async/Tunggu:

   • Menjadikan kod tak segerak lebih mudah dibaca dan diselenggara.

---

Anda boleh membangunkan aplikasi JavaScript yang berkesan dan mudah digunakan dengan memahami dan menggunakan strategi ini. Mempelajari pengaturcaraan tak segerak adalah penting untuk menjadi pembangun JavaScript yang mahir, sama ada anda menguruskan tugasan yang mudah atau mencipta aliran kerja yang rumit.

Ikuti saya di : Benang Github Linkedin

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