Async/await sa TypeScript

Ang artikulong ito ay nagpapaliwanag ng async/await sa TypeScript.

YouTube Video

Async/await sa TypeScript

Sa TypeScript, ang async ay isang keyword na ginagamit upang maikli at malinaw na mailarawan ang mga asynchronous na operasyon at kumikilos na katulad ng sintaks ng async/await sa JavaScript. Ang mga async na function ay dinisenyo upang gawing mas madaling maunawaan ang paghawak ng mga function na nagbabalik ng mga Promises.

Mga Pangunahing Kaalaman sa async na Mga Function

Ang mga function na idineklarang may async na keyword ay palaging nagbabalik ng isang Promise. Narito ang isang pangunahing halimbawa:.

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

Sa halimbawang ito, dahil ang async na function ay palaging nagbabalik ng isang Promise, ang ibinalik na halaga ay awtomatikong nareresolba gamit ang Promise.resolve. Sa madaling salita, ang "Data received" ay nagiging isang Promise<string> at itinuturing bilang isang asynchronous na operasyon.

Ang Keyword na await

Ang await na keyword ay maaari lamang gamitin sa loob ng isang async na function. Ito ay nagbibigay ng kakayahang mag-pause at maghintay para sa resulta ng isang Promise bago ipagpatuloy ang pagpapatakbo ng function.

Sa sumusunod na halimbawa, ang asynchronous na pagproseso gamit ang fetch ay isinulat gamit ang async/await.

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

Sa halimbawang ito, ginagamit ang await upang maghintay sa pagtatapos ng Promise na ibinabalik ng fetch na function, at ang resulta nito ay ini-assign sa variable na response. Bukod dito, ang resulta ng response.json() ay hinihintay rin gamit ang await.

Pag-aasikaso ng Mga Error gamit ang async/await

Ang mga error na nangyayari sa panahon ng asynchronous na pagproseso ay maaaring ma-capture gamit ang karaniwang sintaks na try...catch. Kung may error na mangyayari sa parte ng await, ang error na iyon ay inaasikaso sa loob ng catch block.

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

Sa halimbawang nasa itaas, ang resulta ng fetch function ay hinihintay gamit ang await, at kung may mangyaring error, ito ay inaasikaso gamit ang try...catch.

Mga Kalamangan ng async/await

1. Mas madaling maunawaang asynchronous na pagproseso: Sa paggamit ng async/await, mas madaling maunawaan ang daloy ng code kumpara sa paggamit ng mga Promise chains (then o catch), na nagpapahintulot na maisulat ito na parang synchronous na pagproseso.

2. Madaling pag-aasikaso ng error: Sa paggamit ng try...catch, mas pinadadali ang pag-aasikaso sa mga error sa mga asynchronous na operasyon. Maaari kang makapagsulat ng mas nababasang code kumpara sa paggamit ng mga Promise chains.

Mga Halaga ng Pagbabalik ng mga async na Function

Ang async na function ay palaging nagbabalik ng isang Promise. Kaya't kahit hindi tahasang magbalik ng Promise, posible ang asynchronous na pagproseso gamit ang async na keyword.

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

Sa code sa itaas, isang synchronous na halaga na 42 ang ibinabalik, ngunit dahil nasa loob ito ng isang async na function, awtomatiko itong iko-convert sa Promise.resolve(42).

Sunud-sunod na Pagpapatupad ng Mga Asynchronous na Function

Kapag nagpapatupad ng maraming asynchronous na function nang sunud-sunod, maaari mong gamitin ang await upang kontrolin ang kanilang pagkakasunod-sunod.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

Sa halimbawang ito, ang fetchData2 ay ipinatutupad pagkatapos maghintay na matapos ang fetchData1. Mas madaling basahin ito kumpara sa paggamit ng isang Promise na chain.

Sabayang Pagpapatupad

Kung nais mong magpatupad ng mga asynchronous na operasyon nang sabay-sabay, maaari mong gamitin ang Promise.all upang sabay na pangasiwaan ang maraming Promises.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

Sa kasong ito, ang fetchData1 at fetchData2 ay ipinatutupad nang sabay, at nagpapatuloy ang proseso matapos marisolve ang dalawa. Ito ay nagbibigay-daan sa epektibong pangangasiwa ng maraming asynchronous na operasyon.

Buod

• Ang isang async na function ay nagbabalik ng isang Promise, at sa pamamagitan ng paggamit ng await na keyword, maaari kang maghintay sa resulta ng asynchronous na operasyon.
• Sa pamamagitan ng paggamit ng try...catch, nagiging mas simple ang paghawak sa error sa mga asynchronous na operasyon.
• Sa paggamit ng Promise.all, posible ang sabayang pagpapatupad ng maraming asynchronous na operasyon.

Ang async/await ay malawakang ginagamit sa TypeScript at JavaScript dahil pinapayagan nito ang mas simpleng paglalarawan ng mga asynchronous na operasyon.

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