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://api.invalid-url.com/data');
 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.

Eksempel: Udfør flere asynkrone operationer samtidigt

 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, jsonData2);
10    } catch (error) {
11        console.error('Failed to fetch data:', error);
12    }
13}
14
15fetchMultipleData();

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.

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 operationer: Du kan udføre flere asynkrone operationer samtidigt ved at bruge Promise.all().

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