Async/await i JavaScript

I den här artikeln kommer vi att förklara async/await i JavaScript.

YouTube Video

Async/await i JavaScript

async (och await) i JavaScript är funktioner utformade för att göra skrivandet av asynkrona operationer mer intuitivt och läsbart. Genom att använda detta kan du minska komplexiteten i traditionella callback-funktioner och Promise-kedjor, samt skriva asynkron kod på ett sätt som ser ut som synkron kod.

async Funktion

async används för att definiera en funktion som en asynkron funktion. En async funktion returnerar alltid en Promise. Inom en funktion markerad med async kan du använda await för att vänta på att resultatet av en Promise returneras.

Grundsyntax för en async Funktion

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

I detta fall returnerar anropet till myAsyncFunction() automatiskt ett Promise-objekt. När Promisen är löst blir dess resultat värdet som returneras med return.

Exempel: Grundläggande async Funktion

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

await

await används för att vänta på att en Promise löses. Genom att använda await kan du pausa exekveringen tills Promisen är löst och ta emot resultatet av Promisen. await kan endast användas inom en async funktion.

Exempel: Hur man använder 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 exemplet ovan väntar den på Promisen som returneras av funktionen fetch med await, och utför sedan ytterligare asynkrona operationer med hjälp av resultatet.

Felkontroll med async/await

Om ett fel inträffar inne i en async funktion behandlas det felet som en reject av Promisen. Du kan använda try...catch uttalanden för att utföra felkontroll.

Exempel: Felkontroll

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

Genom att använda ett try...catch-block kan du fånga upp fel som uppstår under asynkrona operationer, vilket förhindrar att programmet kraschar när fel uppstår.

Fördelar med async/await

Jämfört med traditionella Promise-kedjor erbjuder async/await följande fördelar:.

• Förbättrad läsbarhet
  • Asynkron hantering kan skrivas som synkron kod, vilket undviker komplexiteten med djupt nästlade Promise-kedjor och callbacks.
• Enklare felsökning
  • Eftersom det liknar synkron kod blir felsökning och felhantering enklare.
• Bättre underhållbarhet
  • Asynkrona processer kan skrivas enklare, vilket gör det lättare att ändra eller modifiera koden och förbättrar långsiktig underhållbarhet.

Exempel: Promise-kedja vs async/await

Låt oss jämföra kod som använder Promise-kedjor med kod som använder 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 användningen av async/await det möjligt att skriva asynkrona processer på ett linjärt sätt, vilket resulterar i mer läsbar kod.

Kör flera asynkrona operationer samtidigt

Genom att kombinera Promise.all() eller Promise.race() med await, kan du köra flera asynkrona operationer samtidigt och hantera deras resultat gemensamt.

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 flera löften (Promises) samtidigt och returnerar resultaten som en array. Den väntar på att alla löften (Promises) ska lösas och om något av dem misslyckas, anses det vara ett totalt misslyckande.

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() returnerar resultatet av det första löftet som antingen uppfylls eller avslås. Det är användbart när du vill reagera på den asynkrona operation som först slutförs. Men om det första löftet misslyckas fångas felet omedelbart av 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() väntar på alla resultat, oavsett om de lyckas eller misslyckas. Varje resultat returneras i formen { status, value } eller { status, reason }, vilket gör det möjligt för dig att avgöra vilka löften som lyckades och vilka som misslyckades.

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() returnerar endast resultatet av det första lyckade löftet. Ett undantag kastas endast om alla löften misslyckas. Det kan användas som en omförsöksmekanism i miljöer där vissa API:er är opålitliga tills ett lyckas.

Sammanfattning

• async-funktion: Returnerar alltid ett löfte (Promise) och används för att skriva asynkron bearbetning.
• await: Används för att vänta på att ett löfte (Promise) ska lösas och få dess resultat.
• Felmängdshantering: Använd try...catch för att hantera fel som uppstår under asynkron bearbetning.
• Flera asynkrona operationer: Genom att använda metoder som Promise.all() kan du köra flera asynkrona uppgifter samtidigt.

async/await är kraftfulla verktyg för att hantera asynkron bearbetning, så se till att använda dem för att förenkla komplex asynkron logik.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video