Async/await i TypeScript

Denne artikel forklarer async/await i TypeScript.

YouTube Video

Async/await i TypeScript

I TypeScript er async et nøgleord, der præcist beskriver asynkrone operationer og opfører sig på samme måde som JavaScripts async/await syntaks. Async-funktioner er designet til at gøre det mere intuitivt at håndtere funktioner, der returnerer Promises.

Grundlæggende om async-funktioner

Funktioner, der erklæres med async-nøgleordet, returnerer altid en Promise. Her er et grundlæggende eksempel:.

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

I dette eksempel, da async-funktionen altid returnerer en Promise, bliver den returnerede værdi automatisk løst ved hjælp af Promise.resolve. Med andre ord bliver "Data received" til en Promise<string> og behandles som en asynkron operation.

Nøgleordet await

Nøgleordet await kan kun bruges inde i en async-funktion. Dette giver muligheden for at sætte funktionen på pause og vente på resultatet af en Promise, før funktionen fortsætter.

I det følgende eksempel skrives asynkron behandling med fetch ved hjælp af 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 eksempel bruges await til at vente på afslutningen af den Promise, som fetch-funktionen returnerer, og dens resultat tildeles variablen response. Endvidere ventes der også på resultatet af response.json().

Fejlhåndtering med async/await

Fejl, der opstår under asynkron behandling, kan fanges ved hjælp af den standardiserede try...catch-syntaks. Hvis der opstår en fejl i await-delen, håndteres den 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 det ovenstående eksempel ventes på resultatet af fetch-funktionen ved hjælp af await, og hvis der opstår en fejl, håndteres den med try...catch.

Fordele ved async/await

1. Intuitiv asynkron behandling: Ved at bruge async/await bliver kodeflowet mere intuitivt end ved brug af Promise-kæder (then eller catch), hvilket gør det muligt at skrive som synkron behandling.

2. Nem fejlhåndtering: Brug af try...catch forenkler fejlhåndtering i asynkrone operationer. Du kan skrive mere læsbar kode end ved brug af Promise-kæder.

Returneringsværdier for async-funktioner

En async funktion returnerer altid en Promise. Derfor er asynkron behandling mulig ved at bruge async nøgleordet, selv uden eksplicit at returnere en Promise.

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

I koden ovenfor returneres den synkrone værdi 42, men da den er inden i en async funktion, konverteres den automatisk til Promise.resolve(42).

Sekventiel udførelse af asynkrone funktioner

Når du udfører flere asynkrone funktioner i rækkefølge, kan du bruge await til at kontrollere deres rækkefølge.

 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 eksempel udføres fetchData2 efter at have ventet på, at fetchData1 er fuldført. Dette er mere læsevenligt sammenlignet med at bruge en Promise-kæde.

Parallel udførelse

Hvis du vil udføre asynkrone operationer parallelt, kan du bruge Promise.all til at håndtere flere 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 dette tilfælde udføres fetchData1 og fetchData2 samtidig, og processen fortsætter, når begge er afviklet. Dette muliggør effektiv håndtering af flere asynkrone operationer.

Sammendrag

• En async funktion returnerer en Promise, og ved at bruge await nøgleordet kan du vente på resultatet af en asynkron operation.
• Ved at bruge try...catch bliver fejlhåndtering i asynkrone operationer enklere.
• Ved at bruge Promise.all er det muligt at udføre flere asynkrone operationer parallelt.

async/await bruges bredt i TypeScript og JavaScript, fordi det tillader en enklere beskrivelse af asynkrone operationer.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video