Async/await i JavaScript

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

YouTube Video

Async/await i JavaScript

async (og await) i JavaScript er funksjoner designet for å gjøre asynkrone operasjoner mer intuitive og lesbare. Ved å bruke dette kan du redusere kompleksiteten til tradisjonelle tilbakekallingsfunksjoner og Promise-kjeder, og skrive asynkron kode på en måte som ser ut som synkron kode.

async-funksjon

async brukes for å definere en funksjon som en asynkron funksjon. En async-funksjon returnerer alltid en Promise. Innenfor en funksjon merket med async kan du bruke await for å vente på resultatet av en Promise.

Grunnleggende syntaks for en async-funksjon

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

I dette tilfellet returnerer myAsyncFunction() automatisk et Promise-objekt. Når Promise blir løst, blir resultatet verdien som returneres av return.

Eksempel: Grunnleggende async-funksjon

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

await

await brukes for å vente på at en Promise blir løst. Ved å bruke await kan du pause utførelsen til Promise blir løst og motta resultatet av Promise. await kan kun brukes inne i en async-funksjon.

Eksempel: Hvordan bruke 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å Promise som returneres av fetch-funksjonen med await, og utfører deretter videre asynkrone operasjoner ved hjelp av resultatet.

Feilhåndtering med async/await

Hvis en feil oppstår inne i en async-funksjon, behandles feilen som en reject av Promise. Du kan bruke try...catch-setninger for å utføre feilhåndtering.

Eksempel: Feilhå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 å bruke en try...catch-blokk kan du fange opp feil som oppstår under asynkrone operasjoner, og forhindre at programmet krasjer når feil oppstår.

Fordeler med async/await

Sammenlignet med tradisjonelle Promise-kjeder, gir async/await følgende fordeler:.

• Bedre lesbarhet
  • Asynkron behandling kan skrives som synkron kode, noe som unngår kompleksiteten med dypt nestede Promise-kjeder og tilbakekallinger.
• Enklere feilsøking
  • Siden det ligner på synkron kode, blir feilsøking og feilbehandling lettere.
• Bedre vedlikeholdbarhet
  • Asynkrone prosesser kan skrives enklere, noe som gjør det lettere å endre eller modifisere koden og forbedrer langsiktig vedlikeholdbarhet.

Eksempel: Promise-kjede vs async/await

La oss sammenligne kode som bruker Promise-kjeder og kode som bruker 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, gjør bruk av async/await det mulig å skrive asynkrone prosesser på en lineær måte, noe som gir mer lesbar kode.

Utfør flere asynkrone operasjoner samtidig

Ved å kombinere Promise.all() eller Promise.race() med await, kan du utføre flere asynkrone operasjoner samtidig og håndtere resultatene samlet.

Eksempel: Utfør flere asynkrone operasjoner samtidig

 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 resultatene som en array. Den venter på at alle Promises skal bli løst, og hvis noen av dem feiler, anses det som en total feil.

Sammendrag

• async-funksjon: Returnerer alltid et Promise og brukes til å skrive asynkron behandling.
• await: Brukes til å vente på at et Promise blir løst og til å motta resultatet.
• Feilhåndtering: Bruk try...catch for å håndtere feil som oppstår under asynkron behandling.
• Flere asynkrone operasjoner: Du kan utføre flere asynkrone operasjoner samtidig ved bruk av Promise.all().

async/await er kraftige verktøy for å håndtere asynkron behandling, så sørg for å bruke dem for å forenkle kompleks asynkron logikk.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video