Async Made Easy: Menyelam Lebih Dalam ke dalam Panggilan Balik JavaScript, Janji dan Async/Await

JavaScript ialah bahasa satu benang, bermakna ia boleh melaksanakan satu tugas pada satu masa. Walau bagaimanapun, terima kasih kepada gelung acara, ia boleh mengurus operasi tak segerak dengan cekap seperti mengambil data, membaca fail atau mengendalikan interaksi pengguna, memastikan tugas ini tidak menyekat urutan utama. Walau bagaimanapun, aplikasi web selalunya perlu melakukan berbilang operasi serentak, seperti mengambil data daripada API, membaca fail atau mengendalikan interaksi pengguna. Untuk mengendalikan tugas ini dengan cekap tanpa menyekat utas utama, JavaScript menggunakan teknik pengaturcaraan tak segerak. Dalam artikel ini, kami akan menyelidiki konsep teras JavaScript tak segerak: Panggilan Balik, Janji dan Async/Await. Memahami konsep ini adalah penting untuk membina aplikasi web yang responsif dan berprestasi tinggi. Kami akan meneroka setiap konsep langkah demi langkah dengan contoh terperinci untuk membantu anda memahami cara melaksanakannya dengan berkesan.

Pengenalan kepada Pengaturcaraan Asynchronous

Pengaturcaraan tak segerak membolehkan kod anda melaksanakan tugasan lain sementara menunggu operasi yang berjalan lama selesai. Ini penting untuk mencipta aplikasi web responsif. Mari kita pecahkan tiga kaedah utama yang digunakan dalam JavaScript untuk pengaturcaraan tak segerak:

1. Panggil balik
2. Janji
3. Async/Tunggu

Setiap kaedah mempunyai kelebihan dan kekurangan yang tersendiri. Memahami kaedah ini akan membantu anda memilih pendekatan yang betul untuk kes penggunaan khusus anda.

Panggil balik

Apakah Panggilan Balik?

Panggil balik ialah fungsi yang dihantar sebagai hujah kepada fungsi lain dan dilaksanakan selepas fungsi itu selesai. Panggilan balik ialah konsep asas dalam JavaScript, digunakan secara meluas dalam pengaturcaraan tak segerak, pengendalian acara dan banyak lagi. Panggilan balik ialah salah satu kaedah terawal yang digunakan dalam JavaScript untuk mengendalikan operasi tak segerak.

Contoh Panggilan Balik

Mari kita mulakan dengan contoh mudah fungsi panggil balik:

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: 'John', age: 30 };
        callback(data);
    }, 2000);
}

function displayData(data) {
    console.log(`Name: ${data.name}, Age: ${data.age}`);
}

fetchData(displayData);

Dalam contoh ini, fetchData mensimulasikan operasi tak segerak menggunakan setTimeout. Setelah operasi selesai, ia memanggil fungsi displayData dengan data yang diambil.

Masalah dengan Panggilan Balik: Neraka Panggilan Balik

Walaupun panggilan balik adalah mudah, ia boleh membawa kepada kod bersarang dalam apabila berurusan dengan berbilang operasi tak segerak, fenomena yang dikenali sebagai "neraka panggil balik" atau "piramid azab".

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: 'John', age: 30 };
        callback(data);
    }, 2000);
}

function fetchMoreData(data, callback) {
    setTimeout(() => {
        data.job = 'Developer';
        callback(data);
    }, 2000);
}

function displayData(data) {
    console.log(`Name: ${data.name}, Age: ${data.age}, Job: ${data.job}`);
}

fetchData((data) => {
    fetchMoreData(data, (updatedData) => {
        displayData(updatedData);
    });
});

Seperti yang anda lihat, panggilan balik bersarang menjadikan kod lebih sukar dibaca dan diselenggara.

Janji

Apa Itu Janji?

Janji telah diperkenalkan untuk menangani isu yang berkaitan dengan panggilan balik. Janji ialah objek yang mewakili penyiapan atau kegagalan operasi tak segerak. Janji mempunyai tiga keadaan: belum selesai (keadaan awal), dipenuhi (operasi selesai dengan jayanya), dan ditolak (operasi gagal). Ia membolehkan anda merantai operasi, menjadikan kod anda lebih mudah dibaca.

Contoh Janji

Begini cara anda boleh menulis semula contoh sebelumnya menggunakan janji:

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            const data = { name: 'John', age: 30 };
            resolve(data);
        }, 2000);
    });
}

function fetchMoreData(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            data.job = 'Developer';
            resolve(data);
        }, 2000);
    });
}

fetchData()
    .then((data) => fetchMoreData(data))
    .then((updatedData) => {
        console.log(`Name: ${updatedData.name}, Age: ${updatedData.age}, Job: ${updatedData.job}`);
    });

Dalam contoh ini, setiap operasi tak segerak mengembalikan janji, dan kaedah kemudian digunakan untuk merantai operasi.

Ralat Mengendalikan dengan Janji

Janji juga memudahkan pengendalian ralat. Anda boleh menggunakan kaedah tangkapan untuk mengendalikan ralat dalam rangkaian operasi tak segerak:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // Simulate a success or failure
            if (success) {
                const data = { name: 'John', age: 30 };
                resolve(data);
            } else {
                reject('Failed to fetch data');
            }
        }, 2000);
    });
}

fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

Async/Tunggu

Apakah Async/Await?

Async/Await ialah gula sintaktik yang dibina di atas janji, yang diperkenalkan pada ES2017 (ES8). Ia membolehkan anda menulis kod tak segerak dalam cara seperti segerak, meningkatkan kebolehbacaan dan memudahkan aliran kawalan, terutamanya apabila berurusan dengan berbilang operasi tak segerak. Ia membolehkan anda menulis kod tak segerak dengan cara segerak, menjadikannya lebih mudah dibaca dan lebih mudah untuk nyahpepijat.

Contoh Async/Await

Mari tukar contoh berasaskan janji kami untuk menggunakan async/wait:

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            const data = { name: 'John', age: 30 };
            resolve(data);
        }, 2000);
    });
}

function fetchMoreData(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            data.job = 'Developer';
            resolve(data);
        }, 2000);
    });
}

async function displayData() {
    try {
        const data = await fetchData();
        const updatedData = await fetchMoreData(data);
        console.log(`Name: ${updatedData.name}, Age: ${updatedData.age}, Job: ${updatedData.job}`);
    } catch (error) {
        console.error(error);
    }
}

displayData();

Ralat Pengendalian dengan Async/Tunggu

Ralat pengendalian dalam async/menunggu adalah mudah. Anda boleh menggunakan blok cuba/tangkap untuk menangani ralat:

async function displayData() {
    try {
        const data = await fetchData();
        const updatedData = await fetchMoreData(data);
        console.log(`Name: ${updatedData.name}, Age: ${updatedData.age}, Job: ${updatedData.job}`);
    } catch (error) {
        console.error(error);
    }
}

displayData();

Membandingkan Panggilan Balik, Janji dan Async/Menunggu

Kebolehbacaan

• Callbacks: Callbacks: Can lead to callback hell, making the code difficult to read, maintain, and debug, often resulting in error-prone code.
• Promises: Improve readability by allowing you to chain operations.
• Async/Await: Provides the best readability by allowing you to write asynchronous code in a synchronous manner.

Error Handling

• Callbacks: Callbacks: Error handling is more cumbersome and often involves passing error objects through multiple layers of callbacks, leading to complex and hard-to-manage code. Promises and async/await simplify this process by providing more streamlined and centralized error handling mechanisms.
• Promises: Simplifies error handling with the catch method.
• Async/Await: Makes error handling even simpler with try/catch blocks.

Use Cases

• Callbacks: Suitable for simple, single asynchronous operations.
• Promises: Ideal for chaining multiple asynchronous operations.
• Async/Await: Best for complex asynchronous operations and when readability is a priority.

FAQs

What Is the Main Advantage of Using Promises Over Callbacks?

The main advantage of using promises over callbacks is improved readability and maintainability of the code. Promises avoid the nested structure of callbacks, making the code more linear and easier to follow.

Can I Use Async/Await with Older Browsers?

Async/await is supported in most modern browsers. However, for older browsers, you may need to use a transpiler like Babel to convert your async/await code to ES5.

How Do I Handle Multiple Promises Concurrently?

You can use Promise.all to handle multiple promises concurrently. For example:

const promise1 = fetchData();
const promise2 = fetchMoreData(data);

Promise.all([promise1, promise2])
    .then((results) => {
        const [data, moreData] = results;
        console.log(data, moreData);
    })
    .catch((error) => {
        console.error(error);
    });

Is Async/Await Always Better Than Promises?

Async/await is generally more readable than promises, but promises can be more appropriate in certain scenarios, such as when dealing with multiple concurrent operations.

How Do I Cancel an Asynchronous Operation?

JavaScript doesn't natively support canceling promises. However, you can use techniques like AbortController for fetch requests or implement your own cancellation logic.

Conclusion

Asynchronous programming is a fundamental aspect of JavaScript that allows you to build responsive and efficient web applications. Understanding the differences between callbacks, promises, and async/await is crucial for writing clean, maintainable code. By mastering callbacks, promises, and async/await, and understanding when to use each, you can significantly improve the readability, maintainability, and performance of your applications. This knowledge will empower you to tackle any asynchronous challenge with confidence and efficiency. Whether you choose callbacks for simple tasks, promises for chaining operations, or async/await for readability, mastering these concepts will make you a more effective JavaScript developer.

Atas ialah kandungan terperinci Async Made Easy: Menyelam Lebih Dalam ke dalam Panggilan Balik JavaScript, Janji dan Async/Await. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!