Menguasai JavaScript Asynchronous: Panduan untuk Janji dan Async/Await

Sifat tak segerak JavaScript adalah hebat dan penting untuk pembangunan web moden. Daripada mengambil data daripada API kepada pengendalian input pengguna, operasi tak segerak adalah perkara biasa dan ia memerlukan pengendalian yang cekap. Pengenalan Promises dalam ECMAScript 6 (ES6) dan Async/Await dalam ECMAScript 2017 merevolusikan cara pembangun mengendalikan kod tak segerak, menjadikannya lebih bersih dan lebih mudah dibaca.

Dalam blog ini, kami akan meneroka Janji dan Async/Await, cara ia berfungsi dan masa untuk menggunakannya dalam projek JavaScript anda.

---

Memahami JavaScript Asynchronous

JavaScript adalah satu benang, yang bermaksud hanya satu operasi boleh dilaksanakan pada satu masa. Walau bagaimanapun, operasi tak segerak seperti permintaan rangkaian, pembacaan fail atau pemasa membenarkan JavaScript mengendalikan tugasan yang sebaliknya akan menyekat urutan utama, menjadikannya lebih responsif kepada tindakan pengguna.

Sebelum Janji dan Async/Await, operasi tak segerak dikendalikan menggunakan panggilan balik, yang selalunya membawa kepada neraka panggilan balik  -  struktur panggilan balik yang sangat bersarang dan sukar dikekalkan.

---

Janji: Satu Langkah Ke Hadapan

A Janji ialah objek yang mewakili penyiapan (atau kegagalan) operasi tak segerak. Ia membolehkan anda mengendalikan tugas tak segerak dengan cara yang lebih berstruktur berbanding dengan panggilan balik. Janji boleh berada di salah satu daripada tiga keadaan:

• Belum selesai: Operasi masih berjalan.
• Dipenuhi: Operasi telah berjaya diselesaikan.
• Ditolak: Operasi gagal.

Mencipta Janji

Untuk membuat janji, anda lulus dalam fungsi dengan dua hujah, selesaikan dan tolak. Di dalam janji, anda melaksanakan tugas tak segerak, dan bergantung pada keputusan, anda memanggil sama ada azam (berjaya) atau menolak (atas kegagalan).

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { name: 'Ishan', age: 25 };
            resolve(data);
        }, 1000);
    });
};

Dalam contoh di atas, fungsi fetchData mengembalikan janji yang diselesaikan selepas 1 saat dengan data yang diambil.

Mengambil Janji

Anda boleh mengendalikan hasil janji dengan menggunakan .then() untuk kejayaan dan .catch() untuk ralat.

fetchData()
    .then(data => {
        console.log(data); // { name: 'Ishan', age: 25 }
    })
    .catch(error => {
        console.error('Error:', error);
    });

• .then(): Melaksanakan apabila janji telah diselesaikan.
• .catch(): Melaksanakan apabila janji itu ditolak.

Merangkai Janji

Salah satu ciri janji yang paling berkuasa ialah keupayaannya untuk merantai berbilang operasi tak segerak. Hasil satu .then() boleh dihantar ke seterusnya.

fetchData()
    .then(data => {
        return data.name.toUpperCase(); // Modify data
    })
    .then(upperName => {
        console.log(upperName); // 'ISHAN'
    })
    .catch(error => {
        console.error('Error:', error);
    });

Penggabung Janji

Promises juga mempunyai kaedah penggabung dalam yang membantu mengendalikan berbilang operasi tak segerak secara serentak.

• Promise.all(): Menunggu semua janji diselesaikan dan mengembalikan tatasusunan keputusannya. Jika mana-mana janji ditolak, seluruh janji itu ditolak.

Promise.all([fetchData(), fetchData()])
    .then(results => console.log(results))
    .catch(error => console.error(error));

• Promise.race(): Mengembalikan keputusan janji pertama untuk diselesaikan atau ditolak.

Promise.race([fetchData(), fetchData()])
    .then(result => console.log(result))
    .catch(error => console.error(error));

---

Async/Await: Syntactic Sugar Over Promises

Walaupun janji membantu menstruktur kod tak segerak, panggilan chaining .then() masih boleh menjadi rumit apabila berurusan dengan berbilang operasi tak segerak. Di sinilah Async/Await masuk. Diperkenalkan pada ES2017, async/wait membolehkan anda menulis kod tak segerak yang kelihatan segerak.

Menggunakan async dan menunggu

Untuk menggunakan async/wait, anda menandakan fungsi sebagai async, dan di dalam fungsi itu, anda menggunakan kata kunci await sebelum janji. Ini menjadikan JavaScript menunggu janji untuk menyelesaikan (atau menolak) sebelum meneruskan.

const fetchData = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ name: 'Ishan', age: 25 });
        }, 1000);
    });
};

const getData = async () => {
    const data = await fetchData();
    console.log(data); // { name: 'Ishan', age: 25 }
};

getData();

Perhatikan betapa bersihnya kod ini berbanding dengan panggilan chaining .then(). Ia berbunyi seperti kod segerak tetapi berfungsi secara tak segerak.

Ralat Mengendalikan dengan cuba dan tangkap

Apabila menggunakan async/wait, anda boleh menangani ralat dengan try/catch, yang memudahkan untuk mengurus ralat berbanding menggunakan .catch() dengan janji.

const getData = async () => {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
};

getData();

Pendekatan ini menjadikan pengendalian ralat lebih mudah diramal dan menyimpan semua logik dalam satu blok kod.

---

Bila Perlu Menggunakan Janji lwn. Async/Await

Kedua-dua janji dan async/menunggu mencapai matlamat yang sama untuk mengendalikan operasi tak segerak. Jadi, bilakah anda harus menggunakan satu daripada yang lain?

Gunakan Janji apabila:

• Anda perlu menggunakan penggabung Janji seperti Promise.all() atau Promise.race().
• Anda sedang bekerja dengan sebilangan kecil operasi tak segerak dan .then() chaining masih boleh diurus.

Gunakan Async/Tunggu apabila:

• You want cleaner, more readable code.
• You have multiple asynchronous operations that rely on each other's results.
• Error handling needs to be centralized and easier to manage.

---

Mixing Async/Await with Promise Combinators

One of the advantages of async/await is that it can be combined with promise combinators like Promise.all() to handle multiple asynchronous operations simultaneously.

const fetchData1 = () => {
    return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000));
};

const fetchData2 = () => {
    return new Promise(resolve => setTimeout(() => resolve('Data 2'), 2000));
};

const getAllData = async () => {
    try {
        const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
        console.log(data1, data2); // 'Data 1', 'Data 2'
    } catch (error) {
        console.error('Error:', error);
    }
};

getAllData();

This approach allows you to run promises in parallel while still benefiting from the simplicity of async/await.

---

Conclusion

Promises and Async/Await are essential tools for managing asynchronous code in JavaScript. While promises provide a structured way to handle async tasks, async/await takes it to the next level by offering a cleaner and more readable syntax. Both approaches have their place, and knowing when to use them will make you a more efficient and effective JavaScript developer.

If you're new to asynchronous JavaScript, start with promises and experiment with async/await to see how they can transform the way you write code.

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