Async/await i TypeScript

Den här artikeln förklarar async/await i TypeScript.

YouTube Video

Async/await i TypeScript

I TypeScript är async ett nyckelord för att koncist beskriva asynkrona operationer och fungerar på ett liknande sätt som JavaScript's async/await syntax. Async-funktioner är utformade för att göra hanteringen av funktioner som returnerar Promises mer intuitiv.

Grunderna i async-funktioner

Funktioner som deklareras med nyckelordet async returnerar alltid ett Promise. Här är ett grundläggande exempel:.

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

I detta exempel, eftersom async-funktionen alltid returnerar ett Promise, löses det returnerade värdet automatiskt med Promise.resolve. Med andra ord, "Data received" blir ett Promise<string> och behandlas som en asynkron operation.

Nyckelordet await

Nyckelordet await kan endast användas inom en async-funktion. Detta gör det möjligt att pausa och vänta på resultatet av ett Promise innan funktionens körning fortsätter.

I följande exempel skrivs asynkron bearbetning med fetch med hjälp av 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();

I det här exemplet används await för att vänta på att Promise:et som returneras av funktionen fetch ska slutföras, och dess resultat tilldelas variabeln response. Vidare väntas även resultatet av response.json() in.

Felkedja med async/await

Fel som uppstår under asynkron bearbetning kan fångas med hjälp av den vanliga try...catch-syntaxen. Om ett fel uppstår i await-delen, hanteras felet i catch-blocket.

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

I det ovanstående exemplet väntas resultatet av funktionen fetch in med await, och om ett fel uppstår, hanteras det med try...catch.

Fördelar med async/await

1. Intuitiv asynkron bearbetning: Genom att använda async/await blir kodflödet mer intuitivt än när man använder Promise-kedjor (then eller catch), vilket gör det möjligt att skriva det som synkron bearbetning.

2. Enkel felhantering: Användning av try...catch förenklar felhantering i asynkrona operationer. Du kan skriva mer läsbar kod än genom att använda Promise-kedjor.

async-funktioners returvärden

En async-funktion returnerar alltid ett Promise. Därför är asynkron bearbetning möjlig genom att använda nyckelordet async, även utan att uttryckligen returnera ett Promise.

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

I koden ovan returneras ett synkront värde 42, men eftersom det är inuti en async-funktion konverteras det automatiskt till Promise.resolve(42).

Sekventiell körning av asynkrona funktioner

När du kör flera asynkrona funktioner i följd kan du använda await för att kontrollera deras ordning.

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

I detta exempel körs fetchData2 efter att ha väntat på att fetchData1 ska slutföras. Detta är mer läsbart jämfört med att använda en Promise-kedja.

Parallell körning

Om du vill köra asynkrona operationer parallellt kan du använda Promise.all för att hantera flera Promises samtidigt.

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

I detta fall körs fetchData1 och fetchData2 samtidigt, och processen fortsätter när båda har lösts. Detta möjliggör effektiv hantering av flera asynkrona operationer.

Sammanfattning

• En async-funktion returnerar ett Promise, och genom att använda nyckelordet await kan du vänta på resultatet av en asynkron operation.
• Genom att använda try...catch blir felhanteringen i asynkrona operationer enklare.
• Genom att använda Promise.all är det möjligt att köra flera asynkrona operationer parallellt.

async/await används ofta i TypeScript och JavaScript eftersom det möjliggör en enklare beskrivning av asynkrona operationer.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video