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://invalid.codesparklab.com/');
 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.

Promise.all()

 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);
10        console.log(jsonData2);
11    } catch (error) {
12        console.error('Failed to fetch data:', error);
13    }
14}
15
16fetchMultipleData();

• 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.

Promise.race()

 1async function fetchFastestData() {
 2    try {
 3        const fastestResponse = await Promise.race([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData = await fastestResponse.json();
 8        console.log('Fastest data:', jsonData);
 9    } catch (error) {
10        console.error('Fetch error:', error);
11    }
12}
13
14fetchFastestData();

• Promise.race() ay nagbabalik ng resulta ng unang Promise na natupad o nabigo. Ito ay kapaki-pakinabang kapag gusto mong tumugon sa kung alinmang asynchronous operation ang unang matapos. Gayunpaman, kung ang unang Promise ay nabigo, agad na mahuhuli ang error ng catch.

Promise.allSettled()

 1async function fetchWithAllSettled() {
 2    const results = await Promise.allSettled([
 3        // This URL will success
 4        fetch('https://codesparklab.com/json/example1.json'),
 5        // This URL will fail
 6        fetch('https://invalid.codesparklab.com/')
 7    ]);
 8
 9    results.forEach((result, index) => {
10        if (result.status === 'fulfilled') {
11            const url = result.value.url;
12            console.log(`Request ${index + 1} succeeded:`, url);
13        } else {
14            const reason = result.reason;
15            console.warn(`Request ${index + 1} failed:`, reason);
16        }
17    });
18}
19
20fetchWithAllSettled();

• Ang Promise.allSettled() ay naghihintay ng lahat ng resulta, hindi alintana kung nagtagumpay o nabigo. Ang bawat resulta ay ibinabalik sa anyo ng { status, value } o { status, reason }, kaya madali mong matutukoy kung alin ang nagtagumpay at alin ang nabigo.

Promise.any()

 1async function fetchAnySuccessful() {
 2    try {
 3        const firstSuccessful = await Promise.any([
 4            // This URL will fail
 5            fetch('https://invalid.codesparklab.com/'),
 6            // This URL will success
 7            fetch('https://codesparklab.com/json/example1.json')
 8        ]);
 9        const jsonData = await firstSuccessful.json();
10        console.log('First successful response:', jsonData);
11    } catch (error) {
12        console.error('All fetch requests failed:', error);
13    }
14}
15
16fetchAnySuccessful();

• Ang Promise.any() ay nagbabalik lamang ng resulta ng unang matagumpay na natupad na Promise. Magkakaroon lamang ng exception kung lahat ng Promises ay nabigo. Maari itong gamitin bilang mekanismo ng pag-retry sa mga paligid kung saan hindi mapagkakatiwalaan ang ilang API hanggang may magtagumpay.

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: Sa paggamit ng mga method tulad ng Promise.all(), maaari kang magpatakbo ng maraming asynchronous na gawain nang sabay-sabay.

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