Async/await sa JavaScript

Sa artikulong ito, ipapaliwanag namin ang async/await sa JavaScript.

YouTube Video

Async/await sa JavaScript

async (at await) sa JavaScript ay mga tampok na idinisenyo upang gawing mas madaling maunawaan at mabasa ang pagsusulat ng asynchronous na mga operasyon. Sa pamamagitan nito, maaari mong bawasan ang pagiging komplikado ng mga tradisyonal na callback function at mga Promise chain, at maisulat ang asynchronous na code na parang synchronous na code.

Punsyong async

Ang async ay ginagamit upang i-deklara ang isang function bilang isang asynchronous na function. Ang isang async na function ay palaging nagbabalik ng Promise. Sa loob ng isang function na may markang async, maaari mong gamitin ang await upang hintayin ang resulta ng isang Promise na bumalik.

Pangunahing Sintaks ng isang async na Function

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

Sa kasong ito, ang pagtawag sa myAsyncFunction() ay awtomatikong nagbabalik ng isang Promise na object. Kapag ang Promise ay naresolba, ang resulta nito ay nagiging halaga na ibinabalik ng return.

Halimbawa: Pangunahing async na Function

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

await

Ang await ay ginagamit upang hintayin ang isang Promise na ma-resolba. Sa paggamit ng await, maaari mong pansamantalang ihinto ang pagsasagawa hanggang sa ma-resolba ang Promise at makuha ang resulta ng Promise. Ang await ay maaari lamang gamitin sa loob ng isang async na function.

Halimbawa: Paano Gamitin ang 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();

Sa halimbawa sa itaas, hinihintay nito ang Promise na ibinabalik ng fetch na function gamit ang await, at pagkatapos ay nagsasagawa ng karagdagang asynchronous na mga operasyon gamit ang resulta.

Paghawak ng Error gamit ang async/await

Kung may error na nangyari sa loob ng isang async na function, ang error na iyon ay itinuturing bilang isang reject ng Promise. Maaari mong gamitin ang try...catch na mga pahayag upang magsagawa ng paghawak ng error.

Halimbawa: Paghawak ng Error

 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();

Ang paggamit ng try...catch na block ay nagbibigay-daan sa iyo upang makuha ang mga error na nangyayari habang isinasagawa ang asynchronous na mga operasyon, na pumipigil sa programa na bumagsak kapag may mga error.

Mga Benepisyo ng async/await

Kung ihahambing sa mga tradisyonal na Promise chain, ang async/await ay may mga sumusunod na benepisyo:.

• Mas malinaw ang pagbasa
  • Ang asynchronous na pagproseso ay maaaring maisulat na parang synchronous na code, kaya maiwasan ang komplikasyon ng malalalim na pagkakabuo ng mga Promise chain at mga callback.
• Mas madaling pag-debug
  • Dahil kamukha nito ang synchronous na code, mas nagiging madali ang pag-debug at paghawak ng mga error.
• Mas madaling mapanatili
  • Ang mga asynchronous na proseso ay maaaring maisulat nang mas simple, kaya mas madali itong baguhin o i-modify, at mapapabuti ang pagpapanatili sa code sa pangmatagalan.

Halimbawa: Promise chain vs async/await

Ihambing natin ang code na gumagamit ng Promise chain at code na gumagamit ng 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}

Makikita mo, ang paggamit ng async/await ay nagbibigay-daan na maisulat ang mga asynchronous na proseso nang sunud-sunod, na nagreresulta sa mas madaling basahin na code.

Paganahin ang maraming asynchronous na operasyon nang sabay-sabay

Sa pamamagitan ng pagsasama ng Promise.all() o Promise.race() sa await, maaari kang sabay-sabay na magpatakbo ng maraming asynchronous na operasyon at sabay na hawakan ang kanilang mga resulta.

Halimbawa: Paganahin nang sabay-sabay ang mga asynchronous na operasyon

 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();

Ang Promise.all() ay nagre-resolba ng maraming Promises nang sabay-sabay at ibinabalik ang kanilang mga resulta bilang isang array. Naghihintay ito na ma-resolve lahat ng Promises, at kung mayroon mang mabigo, ituturing na isang kabiguan sa kabuuan.

Buod

• async function: Palaging nagbabalik ng isang Promise at ginagamit para magsulat ng asynchronous na proseso.
• await: Ginagamit upang maghintay sa pag-resolve ng isang Promise at tanggapin ang resulta nito.
• Paghawak ng error: Gumamit ng try...catch upang mahawakan ang mga error na nagaganap habang isinasagawa ang asynchronous na proseso.
• Maramihang asynchronous na operasyon: Maaari mong paganahin ang maraming asynchronous na operasyon nang sabay-sabay gamit ang Promise.all().

Ang async/await ay makapangyarihang mga kasangkapan para sa paghawak ng asynchronous na proseso, kaya siguraduhing gamitin ang mga ito upang gawing simple ang kumplikadong asynchronous na lohika.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video