Async/await in TypeScript

Dit artikel legt async/await uit in TypeScript.

YouTube Video

Async/await in TypeScript

Async is in TypeScript een keyword om asynchrone operaties bondig te beschrijven en werkt vergelijkbaar met de async/await-syntaxis in JavaScript. Async functies zijn ontworpen om het werken met functies die Promises retourneren intuïtiever te maken.

Basisprincipes van async functies

Functies die met het async keyword worden gedeclareerd, retourneren altijd een Promise. Hier is een eenvoudig voorbeeld:.

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

In dit voorbeeld, omdat de async functie altijd een Promise retourneert, wordt de geretourneerde waarde automatisch opgelost met Promise.resolve. Met andere woorden, "Data received" wordt een Promise<string> en wordt behandeld als een asynchrone operatie.

Het await keyword

Het await keyword kan alleen worden gebruikt binnen een async functie. Hiermee kun je pauzeren en wachten op het resultaat van een Promise voordat je verdergaat met de uitvoering van de functie.

In het volgende voorbeeld wordt asynchrone verwerking met fetch geschreven met 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();

In dit voorbeeld wordt await gebruikt om te wachten op de voltooiing van de Promise die door de fetch functie wordt geretourneerd, en het resultaat wordt toegewezen aan de variabele response. Daarnaast wordt ook het resultaat van response.json() afgewacht.

Foutafhandeling met async/await

Fouten die optreden tijdens asynchrone verwerking kunnen worden opgevangen met behulp van de standaard try...catch-syntaxis. Als er een fout optreedt bij het await gedeelte, wordt die fout afgehandeld in het catch blok.

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

In het bovenstaande voorbeeld wordt het resultaat van de fetch functie afgewacht met await, en als er een fout optreedt wordt het afgehandeld met try...catch.

Voordelen van async/await

1. Intuïtieve asynchrone verwerking: Met async/await wordt de codeflow intuïtiever dan met gebruik van Promise-ketens (then of catch), waardoor het kan worden geschreven als synchrone verwerking.

2. Eenvoudige foutafhandeling: Het gebruik van try...catch vereenvoudigt foutafhandeling in asynchrone operaties. Je kunt leesbaardere code schrijven dan met gebruik van Promise-ketens.

Retourwaarden van async functies

Een async-functie retourneert altijd een Promise. Daarom is asynchrone verwerking mogelijk met behulp van het sleutelwoord async, zelfs zonder expliciet een Promise terug te geven.

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

In de bovenstaande code wordt een synchrone waarde 42 geretourneerd, maar aangezien het zich in een async-functie bevindt, wordt het automatisch omgezet in Promise.resolve(42).

Sequentiële uitvoering van asynchrone functies

Bij het uitvoeren van meerdere asynchrone functies achter elkaar kunt u await gebruiken om hun volgorde te regelen.

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

In dit voorbeeld wordt fetchData2 uitgevoerd na het wachten tot fetchData1 is voltooid. Dit is beter leesbaar in vergelijking met het gebruik van een Promise-keten.

Parallelle uitvoering

Als u asynchrone bewerkingen parallel wilt uitvoeren, kunt u Promise.all gebruiken om meerdere Promises gelijktijdig te verwerken.

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

In dit geval worden fetchData1 en fetchData2 tegelijkertijd uitgevoerd, en gaat het proces verder nadat beide zijn opgelost. Dit maakt een efficiënte afhandeling van meerdere asynchrone bewerkingen mogelijk.

Samenvatting

• Een async-functie retourneert een Promise, en door het sleutelwoord await te gebruiken, kunt u wachten op het resultaat van een asynchrone bewerking.
• Door try...catch te gebruiken, wordt foutafhandeling in asynchrone bewerkingen eenvoudiger.
• Door Promise.all te gebruiken, is het mogelijk om meerdere asynchrone bewerkingen parallel uit te voeren.

async/await wordt veel gebruikt in TypeScript en JavaScript omdat het een eenvoudigere beschrijving van asynchrone bewerkingen mogelijk maakt.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video