Pengaturcaraan Asynchronous dalam JavaScript: Panggilan Balik lwn Janji lwn Async/Await

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.

Jadual Kandungan

1. Pengenalan kepada Pengaturcaraan Asynchronous
2. Panggilan balik
   • Sintaks dan Contoh
   • Kebaikan dan Keburukan
3. Janji
   • Sintaks dan Contoh
   • Merangkai Janji
   • Kebaikan dan Keburukan
4. Async/Tunggu
   • Sintaks dan Contoh
   • Pengendalian Ralat
   • Kebaikan dan Keburukan
5. Perbandingan dan Amalan Terbaik
6. Kesimpulan

Pengenalan kepada Pengaturcaraan Asynchronous

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.

Panggilan balik

Sintaks dan Contoh

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 dan Kekurangan

Kelebihan:

• Mudah dan mudah untuk tugasan kecil.
• Menyediakan cara untuk melaksanakan kod selepas operasi tak segerak selesai.

Kelemahan:

• Boleh membawa kepada "neraka panggil balik" apabila berbilang operasi tak segerak bersarang, menjadikan kod sukar dibaca dan diselenggara.
• Pengendalian ralat adalah menyusahkan, kerana ralat perlu diuruskan dalam setiap panggilan balik.

Janji

Sintaks dan Contoh

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.

Merangkai Janji

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 dan Kekurangan

Kelebihan:

• Mengelakkan panggilan balik neraka dengan membenarkan rantaian operasi tak segerak.
• Menyediakan pengendalian ralat terbina dalam dengan tangkapan.
• Meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

Kelemahan:

• Masih boleh menjadi kompleks dengan berbilang panggilan kemudian bersarang.
• Ralat pengendalian dalam rantai boleh jadi bukan perkara remeh.

Async/Tunggu

Sintaks dan Contoh

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.

Pengendalian Ralat

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 dan Kekurangan

Kelebihan:

• Memudahkan kod tak segerak, menjadikannya kelihatan seperti kod segerak.
• Meningkatkan kebolehbacaan dan kebolehselenggaraan kod.
• Memudahkan pengendalian ralat dengan blok cuba/tangkap.

Kelemahan:

• Memerlukan pemahaman tentang Janji kerana Async/Await dibina di atasnya.
• Masih agak baharu, jadi sesetengah persekitaran mungkin tidak menyokongnya sepenuhnya.

Perbandingan dan Amalan Terbaik

Perbandingan

• Panggil balik: Sesuai untuk tugas tak segerak tahap tunggal yang mudah tetapi boleh membawa kepada neraka panggil balik dalam senario yang rumit.
• Janji: Meningkatkan kebolehbacaan dan kebolehurusan, membenarkan rantaian operasi tak segerak. Pengendalian ralat terbina dalam dengan tangkapan.
• Async/Await: Menyediakan cara yang paling mudah dibaca dan diselenggara untuk menulis kod tak segerak. Memudahkan pengendalian ralat dan kelihatan seperti kod segerak.

Amalan Terbaik

• Gunakan Async/Await untuk kebanyakan senario yang anda perlukan untuk mengendalikan operasi tak segerak. Ia memberikan kebolehbacaan dan kesederhanaan yang terbaik.
• Gunakan Janji apabila anda perlu melakukan berbilang operasi tak segerak dalam urutan atau apabila menggunakan perpustakaan yang mengembalikan Janji.
• Elakkan Panggilan Balik melainkan berfungsi dengan kod lama atau apabila berurusan dengan tugas tak segerak yang sangat mudah.

Kesimpulan

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!