Async/await i JavaScript

I denne artikel vil vi forklare async/await i JavaScript.

YouTube Video

Async/await i JavaScript

async (og await) i JavaScript er funktioner designet til at gøre det mere intuitivt og læsbart at skrive asynkrone operationer. Ved at bruge dette kan du reducere kompleksiteten i traditionelle callback-funktioner og Promise-kæder og skrive asynkron kode på en måde, der ligner synkron kode.

async Funktion

async bruges til at definere en funktion som en asynkron funktion. En async funktion returnerer altid en Promise. Inden for en funktion markeret med async kan du bruge await til at vente på, at resultatet af en Promise bliver returneret.

Grundlæggende syntaks for en async funktion

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

I dette tilfælde returnerer opkaldet af myAsyncFunction() automatisk et Promise-objekt. Når Promisen er løst, bliver dens resultat værdien, der returneres af return.

Eksempel: Grundlæggende async funktion

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

await

await bruges til at vente på, at en Promise bliver løst. Ved at bruge await kan du sætte eksekveringen på pause, indtil Promisen er løst, og modtage resultatet af Promisen. await kan kun bruges inden for en async funktion.

Eksempel: Sådan bruges await

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

I eksemplet ovenfor venter den på Promisen, der returneres af fetch funktionen med await, og udfører derefter yderligere asynkrone operationer ved hjælp af resultatet.

Fejlhåndtering med async/await

Hvis en fejl opstår inden for en async funktion, behandles denne fejl som en reject af Promisen. Du kan bruge try...catch udsagn til at udføre fejlhåndtering.

Eksempel: Fejlhåndtering

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

Ved at bruge et try...catch blok kan du fange fejl, der opstår under asynkrone operationer, og forhindre, at programmet crasher, når fejl opstår.

Fordele ved async/await

Sammenlignet med traditionelle Promise-kæder tilbyder async/await følgende fordele:.

• Forbedret læsbarhed
  • Asynkron behandling kan skrives som synkron kode, hvilket undgår kompleksiteten ved dybt indlejrede Promise-kæder og callbacks.
• Nemmere fejlfinding
  • Da det minder om synkron kode, bliver fejlfinding og fejlhåndtering nemmere.
• Bedre vedligeholdelse
  • Asynkrone processer kan skrives enklere, hvilket gør det lettere at ændre eller tilpasse koden og forbedrer den langsigtede vedligeholdelse.

Eksempel: Promise-kæde vs async/await

Lad os sammenligne kode, der bruger Promise-kæder, med kode, der bruger 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}

Som du kan se, gør brugen af async/await det muligt at skrive asynkrone processer på en lineær måde, hvilket resulterer i mere læsbar kode.

Udfør flere asynkrone operationer samtidig

Ved at kombinere Promise.all() eller Promise.race() med await kan du udføre flere asynkrone operationer samtidig og håndtere deres resultater samlet.

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() løser flere Promises samtidig og returnerer deres resultater som et array. Den venter på, at alle Promises løses, og hvis nogen af dem fejler, betragtes det som en samlet fejl.

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() returnerer resultatet af det første Promise, der enten bliver opfyldt eller afvist. Det er nyttigt, når du vil reagere på den asynkrone handling, der afsluttes først. Men hvis det første Promise fejler, bliver fejlen straks fanget af 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() venter på alle resultater, uanset om de lykkes eller fejler. Hvert resultat returneres som { status, value } eller { status, reason }, så du kan afgøre, hvilke Promises der lykkedes, og hvilke der fejlede.

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() returnerer kun resultatet af det første Promise, der er opfyldt med succes. En undtagelse kastes kun, hvis alle Promises fejler. Det kan bruges som en genforsøgs-mekanisme i miljøer, hvor nogle API’er er upålidelige, indtil én lykkes.

Sammendrag

• async-funktion: Returnerer altid en Promise og bruges til at skrive asynkron behandling.
• await: Bruges til at vente på, at en Promise løses og modtage dens resultat.
• Fejlhåndtering: Brug try...catch til at håndtere fejl, der opstår under asynkron behandling.
• Flere asynkrone handlinger: Ved at bruge metoder som Promise.all(), kan du køre flere asynkrone opgaver samtidig.

async/await er kraftfulde værktøjer til at håndtere asynkron behandling, så sørg for at bruge dem til at forenkle kompleks asynkron logik.

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