Async/await i TypeScript

Denne artikkelen forklarer async/await i TypeScript.

YouTube Video

Async/await i TypeScript

I TypeScript er async et nøkkelord som brukes til å beskrive asynkrone operasjoner på en konsis måte og oppfører seg på samme måte som JavaScript sin async/await-syntaks. Async-funksjoner er designet for å gjøre håndtering av funksjoner som returnerer Promises mer intuitiv.

Grunnleggende om async-funksjoner

Funksjoner erklært med nøkkelordet async returnerer alltid en Promise. Her er et grunnleggende eksempel:.

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

I dette eksempelet, fordi async-funksjonen alltid returnerer en Promise, blir returverdien automatisk løst ved hjelp av Promise.resolve. Med andre ord blir "Data received" til en Promise<string> og behandles som en asynkron operasjon.

Nøkkelordet await

Nøkkelordet await kan bare brukes inne i en async-funksjon. Dette gir muligheten til å pause og vente på resultatet av en Promise før funksjonen fortsetter å kjøre.

I følgende eksempel blir asynkron behandling ved hjelp av fetch skrevet med 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 dette eksempelet brukes await for å vente på fullføringen av Promise som returneres av fetch-funksjonen, og resultatet tildeles variabelen response. Videre blir resultatet av response.json() også ventet på med await.

Feilhåndtering med async/await

Feil som oppstår under asynkron behandling kan fanges opp ved å bruke den vanlige try...catch-syntaksen. Hvis det oppstår en feil under await-delen, håndteres feilen i catch-blokken.

 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 eksempelet ovenfor blir resultatet av fetch-funksjonen ventet på med await, og hvis det oppstår en feil, håndteres den med try...catch.

Fordeler med async/await

1. Intuitiv asynkron behandling: Ved å bruke async/await blir kodeflyten mer intuitiv enn ved bruk av Promise-kjeder (then eller catch), noe som gjør at koden kan skrives som om den er synkron.

2. Enkel feilhåndtering: Ved å bruke try...catch forenkles feilhåndtering i asynkrone operasjoner. Du kan skrive mer lesbar kode enn ved bruk av Promise-kjeder.

Returverdier for async-funksjoner

En async-funksjon returnerer alltid en Promise. Derfor er asynkron behandling mulig ved å bruke async-nøkkelordet, selv uten eksplisitt å returnere en Promise.

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

I koden ovenfor returneres en synkron verdi 42, men siden den er inne i en async-funksjon, blir den automatisk konvertert til Promise.resolve(42).

Sekvensiell utførelse av asynkrone funksjoner

Når du utfører flere asynkrone funksjoner etter hverandre, kan du bruke await for å kontrollere rekkefølgen.

 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 dette eksemplet utføres fetchData2 etter å ha ventet på at fetchData1 skal fullføres. Dette er mer lesbart sammenlignet med å bruke en Promise-kjede.

Parallell utførelse

Hvis du vil utføre asynkrone operasjoner parallelt, kan du bruke Promise.all for å håndtere flere Promises samtidig.

 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 dette tilfellet utføres fetchData1 og fetchData2 samtidig, og prosessen fortsetter etter at begge er løst. Dette muliggjør effektiv håndtering av flere asynkrone operasjoner.

Sammendrag

• En async-funksjon returnerer en Promise, og ved å bruke nøkkelordet await kan du vente på resultatet av en asynkron operasjon.
• Ved å bruke try...catch blir feilbehandling i asynkrone operasjoner enklere.
• Ved å bruke Promise.all er det mulig å utføre flere asynkrone operasjoner parallelt.

async/await er mye brukt i TypeScript og JavaScript fordi det gir en enklere beskrivelse av asynkrone operasjoner.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video