Async/await in JavaScript

In dit artikel leggen we async/await in JavaScript uit.

YouTube Video

Async/await in JavaScript

async (en await) in JavaScript zijn functies ontworpen om het schrijven van asynchrone operaties intuïtiever en leesbaarder te maken. Door dit te gebruiken kun je de complexiteit van traditionele callbackfuncties en Promise-ketens verminderen, en asynchrone code schrijven op een manier die lijkt op synchrone code.

async Functie

async wordt gebruikt om een functie als een asynchrone functie te definiëren. Een async functie retourneert altijd een Promise. Binnen een functie gemarkeerd met async kun je await gebruiken om te wachten tot het resultaat van een Promise wordt geretourneerd.

Basis Syntax van een async Functie

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

In dit geval retourneert het aanroepen van myAsyncFunction() automatisch een Promise-object. Wanneer de Promise wordt opgelost, wordt het resultaat de waarde die door return wordt geretourneerd.

Voorbeeld: Basis async Functie

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await wordt gebruikt om te wachten totdat een Promise wordt opgelost. Door await te gebruiken, kun je de uitvoering pauzeren totdat de Promise is opgelost en het resultaat van de Promise ontvangen. await kan alleen worden gebruikt binnen een async functie.

Voorbeeld: Hoe await te gebruiken

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

In het bovenstaande voorbeeld wacht het met await op de Promise die door de fetch functie wordt geretourneerd, en voert vervolgens verdere asynchrone bewerkingen uit met het resultaat.

Foutenafhandeling met async/await

Als er een fout optreedt binnen een async functie, wordt die fout behandeld als een reject van de Promise. Je kunt try...catch-instructies gebruiken om fouten af te handelen.

Voorbeeld: Foutenafhandeling

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://invalid.codesparklab.com/');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

Het gebruik van een try...catch-blok stelt je in staat fouten op te vangen die optreden tijdens asynchrone operaties, waardoor wordt voorkomen dat het programma crasht wanneer er fouten optreden.

Voordelen van async/await

In vergelijking met traditionele Promise-ketens biedt async/await de volgende voordelen:.

• Verbeterde leesbaarheid
  • Asynchrone verwerking kan worden geschreven als synchrone code, waardoor de complexiteit van diep geneste Promise-ketens en callbacks wordt vermeden.
• Eenvoudiger debuggen
  • Omdat het lijkt op synchrone code, wordt debuggen en foutafhandeling eenvoudiger.
• Betere onderhoudbaarheid
  • Asynchrone processen kunnen eenvoudiger worden geschreven, waardoor het makkelijker wordt om de code aan te passen of te wijzigen en de lange termijn onderhoudbaarheid wordt verbeterd.

Voorbeeld: Promise-keten versus async/await

Laten we code vergelijken die gebruikmaakt van Promise-ketens en code die gebruikmaakt van async/await.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

Zoals je kunt zien, kun je met async/await asynchrone processen op een lineaire manier schrijven, wat resulteert in beter leesbare code.

Meerdere asynchrone bewerkingen tegelijkertijd uitvoeren

Door Promise.all() of Promise.race() te combineren met await, kun je meerdere asynchrone bewerkingen tegelijkertijd uitvoeren en hun resultaten gezamenlijk afhandelen.

Promise.all()

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1);
10        console.log(jsonData2);
11    } catch (error) {
12        console.error('Failed to fetch data:', error);
13    }
14}
15
16fetchMultipleData();

• Promise.all() lost meerdere Promises tegelijkertijd op en retourneert hun resultaten als een array. Het wacht tot alle Promises zijn opgelost, en als een van hen mislukt, wordt het als een algehele mislukking beschouwd.

Promise.race()

 1async function fetchFastestData() {
 2    try {
 3        const fastestResponse = await Promise.race([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData = await fastestResponse.json();
 8        console.log('Fastest data:', jsonData);
 9    } catch (error) {
10        console.error('Fetch error:', error);
11    }
12}
13
14fetchFastestData();

• Promise.race() geeft het resultaat terug van de eerste Promise die wordt ingewilligd of afgewezen. Het is handig wanneer je wilt reageren op welke asynchrone operatie als eerste voltooid is. Als de eerste Promise echter faalt, wordt de fout direct opgevangen door catch.

Promise.allSettled()

 1async function fetchWithAllSettled() {
 2    const results = await Promise.allSettled([
 3        // This URL will success
 4        fetch('https://codesparklab.com/json/example1.json'),
 5        // This URL will fail
 6        fetch('https://invalid.codesparklab.com/')
 7    ]);
 8
 9    results.forEach((result, index) => {
10        if (result.status === 'fulfilled') {
11            const url = result.value.url;
12            console.log(`Request ${index + 1} succeeded:`, url);
13        } else {
14            const reason = result.reason;
15            console.warn(`Request ${index + 1} failed:`, reason);
16        }
17    });
18}
19
20fetchWithAllSettled();

• Promise.allSettled() wacht op alle resultaten, ongeacht succes of mislukking. Elk resultaat wordt teruggegeven als { status, value } of { status, reason }, zodat je kunt bepalen welke Promises zijn geslaagd en welke zijn mislukt.

Promise.any()

 1async function fetchAnySuccessful() {
 2    try {
 3        const firstSuccessful = await Promise.any([
 4            // This URL will fail
 5            fetch('https://invalid.codesparklab.com/'),
 6            // This URL will success
 7            fetch('https://codesparklab.com/json/example1.json')
 8        ]);
 9        const jsonData = await firstSuccessful.json();
10        console.log('First successful response:', jsonData);
11    } catch (error) {
12        console.error('All fetch requests failed:', error);
13    }
14}
15
16fetchAnySuccessful();

• Promise.any() geeft alleen het resultaat terug van de eerste succesvol ingewilligde Promise. Een uitzondering wordt alleen opgegooid als alle Promises mislukken. Het kan worden gebruikt als een herhalingsmechanisme in omgevingen waar sommige API's onbetrouwbaar zijn totdat er één slaagt.

Samenvatting

• async-functie: Retourneert altijd een Promise en wordt gebruikt om asynchrone verwerking te schrijven.
• await: Gebruikt om te wachten tot een Promise wordt opgelost en het resultaat te ontvangen.
• Foutenafhandeling: Gebruik try...catch om fouten die tijdens asynchrone verwerking optreden af te handelen.
• Meerdere asynchrone operaties: Door methodes zoals Promise.all() te gebruiken, kun je meerdere asynchrone taken gelijktijdig uitvoeren.

async/await zijn krachtige tools voor het omgaan met asynchrone verwerking, dus zorg ervoor dat je ze gebruikt om complexe asynchrone logica te vereenvoudigen.

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

YouTube Video