Async/await dalam JavaScript

Dalam artikel ini, kami akan menjelaskan async/await dalam JavaScript.

YouTube Video

Async/await dalam JavaScript

async (dan await) dalam JavaScript adalah ciri-ciri yang direka untuk membuat penulisan operasi asinkron lebih intuitif dan mudah dibaca. Dengan menggunakan ini, anda dapat mengurangkan kerumitan fungsi panggilan balik (callback) tradisional dan rantaian Promise, serta menulis kod tak segerak dengan cara yang kelihatan seperti kod segerak.

Fungsi async

async digunakan untuk mendefinisikan satu fungsi sebagai fungsi asinkron. Satu fungsi async akan sentiasa mengembalikan Promise. Dalam fungsi yang ditandai dengan async, anda boleh menggunakan await untuk menunggu hasil dari Promise dipulangkan.

Sintaks Asas Fungsi async

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

Dalam kes ini, memanggil myAsyncFunction() secara automatik mengembalikan objek Promise. Apabila Promise diselesaikan, hasilnya menjadi nilai yang dipulangkan oleh return.

Contoh: Fungsi async Asas

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await digunakan untuk menunggu Promise diselesaikan. Dengan menggunakan await, anda boleh menjeda pelaksanaan sehingga Promise diselesaikan dan menerima hasil dari Promise tersebut. await hanya boleh digunakan dalam satu fungsi async.

Contoh: Cara Menggunakan await

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

Dalam contoh di atas, ia menunggu Promise yang dipulangkan oleh fungsi fetch dengan await, dan kemudian melaksanakan operasi asinkron selanjutnya menggunakan hasil tersebut.

Pengendalian Ralat dengan async/await

Jika berlaku ralat dalam satu fungsi async, ralat tersebut dianggap sebagai reject bagi Promise. Anda boleh menggunakan pernyataan try...catch untuk melakukan pengendalian ralat.

Contoh: Pengendalian Ralat

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://api.invalid-url.com/data');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

Menggunakan blok try...catch membolehkan anda menangkap ralat yang berlaku semasa operasi asinkron, mengelakkan program daripada rosak apabila ralat berlaku.

Manfaat async/await

Berbanding dengan rantaian Promise tradisional, async/await menawarkan kelebihan berikut:.

• Keterbacaan yang lebih baik
  • Proses tak segerak boleh ditulis seperti kod segerak, mengelakkan kerumitan rantaian Promise dan callback yang bertingkat-tingkat.
• Penyahpepijatan lebih mudah
  • Kerana ia menyerupai kod segerak, penyahpepijatan dan pengendalian ralat menjadi lebih mudah.
• Penyelenggaraan yang lebih baik
  • Proses tak segerak boleh ditulis dengan lebih ringkas, menjadikannya lebih mudah untuk mengubah atau menambah baik kod dan meningkatkan pengekalan jangka panjang.

Contoh: Rantaian Promise vs async/await

Mari kita bandingkan kod menggunakan rantaian Promise dengan kod menggunakan async/await.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

Seperti yang anda lihat, penggunaan async/await membolehkan anda menulis proses tak segerak secara linear, menghasilkan kod yang lebih mudah dibaca.

Laksanakan pelbagai operasi tak segerak secara serentak

Dengan menggabungkan Promise.all() atau Promise.race() dengan await, anda boleh melaksanakan pelbagai operasi tak segerak secara serentak dan mengendalikan hasilnya secara kolektif.

Contoh: Laksanakan pelbagai operasi tak segerak secara serentak

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1, jsonData2);
10    } catch (error) {
11        console.error('Failed to fetch data:', error);
12    }
13}
14
15fetchMultipleData();

Promise.all() menyelesaikan pelbagai Promise secara serentak dan mengembalikan hasilnya sebagai array. Ia menunggu semua Promise selesai, dan jika mana-mana daripadanya gagal, ia dianggap sebagai kegagalan keseluruhan.

Ringkasan

• Fungsi async: Sentiasa mengembalikan Promise dan digunakan untuk menulis pemprosesan tak segerak.
• await: Digunakan untuk menunggu satu Promise selesai dan menerima hasilnya.
• Pengendalian ralat: Gunakan try...catch untuk mengendalikan ralat yang berlaku semasa pemprosesan tak segerak.
• Pelbagai operasi tak segerak: Anda boleh melaksanakan pelbagai operasi tak segerak serentak menggunakan Promise.all().

async/await adalah alat yang kuat untuk mengendalikan pemprosesan tak segerak, jadi pastikan anda menggunakannya untuk mempermudah logik tak segerak yang kompleks.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video