Använda Async/Await för Renare Asynkron Kod

async/await-syntaxen är ett modernt och mer lättläst sätt att arbeta med promises i JavaScript. Det möjliggör för utvecklare att skriva asynkron kod som ser ut och beter sig som synkron kod. Istället för att kedja then()-anrop kan du använda await för att pausa exekveringen av en async-funktion tills en promise har lösts.

Hur async-funktioner fungerar

En async-funktion är en funktion som deklareras med nyckelordet async. Den returnerar en Promise som standard, och du kan använda nyckelordet await inuti den för att pausa exekveringen tills promisen har lösts.

index.html

index.js

fetchData-funktionen deklareras som async, vilket möjliggör användning av await för att pausa exekveringen tills ett löfte har lösts. Här simuleras en fördröjning på 2 sekunder för att efterlikna en datahämtning. När löftet är löst visas resultatet ("Data fetched successfully!") i HTML-paragrafen.

Förenkling av löfteskedjor med Async/Await

Vid arbete med flera asynkrona operationer i följd kan användning av async/await förenkla kod som annars skulle involvera kedjning av löften med then().

Här visas hur en serie löften (som att hämta och bearbeta data) kan hanteras mer överskådligt med async/await.

index.html

index.js

processData-funktionen anropar tre asynkrona funktioner—fetchData, processFetchedData och displayProcessedData—i följd, där varje steg väntar (await) på att föregående operation ska slutföras innan nästa påbörjas. Denna strukturerade process eliminerar behovet av att kedja löften, vilket förbättrar läsbarheten. Slutresultatet ("Raw Data processed and displayed on the page") visas sedan i HTML-koden.

Felhantering med try...catch i Async/Await

Att hantera fel i löfteskedjor med .catch() kan bli omständligt, särskilt vid flera asynkrona operationer. Med async/await kan fel hanteras med traditionella try...catch-block, vilket gör felhanteringen mer intuitiv och lättläst.

index.html

index.js

I fetchDataWithError körs try-operationen i await-blocket, och om den lyckas visas resultatet i HTML:en. Om ett fel uppstår (simulerat av simulateError), hanteras det i catch-blocket genom att styckets text sätts till felmeddelandet ("Error: Something went wrong!").

1. Vad gör nyckelordet `async` när det läggs till en funktion?

2. Vad är syftet med nyckelordet `await`?

3. Vilken av följande är en fördel med att använda `async/await` jämfört med `.then()`-kedjor?

Vad gör nyckelordet async när det läggs till en funktion?

Select the correct answer

Funktionen returnerar omedelbart.

Funktionen returnerar automatiskt ett Promise.

Funktionen tvingas att köras synkront.

Alla parametrar omvandlas till Promises.

Vad är syftet med nyckelordet await?

Select the correct answer

Att pausa en asynkron funktion tills ett Promise är löst.

Att tvinga en funktion att vänta en viss tid.

Att förhindra att någon kod körs innan hela funktionen är klar.

Att skapa ett Promise som alltid lyckas.

Vilken av följande är en fördel med att använda async/await jämfört med .then()-kedjor?

Select the correct answer

Det eliminerar behovet av Promises helt och hållet.

Det möjliggör hantering av flera asynkrona operationer utan fel.

Det ger en mer lättläst kodstruktur som liknar synkron kod.

Det kräver ingen felhantering.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 4

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you show an example of how to use async/await in a real-world scenario?

How does async/await compare to using plain promises with then() and catch()?

Can you explain how error handling works with async/await in more detail?

Awesome!

Completion rate improved to 2.22

Använda Async/Await för Renare Asynkron Kod

Svep för att visa menyn

Hur async-funktioner fungerar

index.html

index.js

Förenkling av löfteskedjor med Async/Await

Vid arbete med flera asynkrona operationer i följd kan användning av async/await förenkla kod som annars skulle involvera kedjning av löften med then().

Här visas hur en serie löften (som att hämta och bearbeta data) kan hanteras mer överskådligt med async/await.

index.html

index.js

Felhantering med try...catch i Async/Await

index.html

index.js

1. Vad gör nyckelordet `async` när det läggs till en funktion?

2. Vad är syftet med nyckelordet `await`?

3. Vilken av följande är en fördel med att använda `async/await` jämfört med `.then()`-kedjor?

Vad gör nyckelordet async när det läggs till en funktion?

Select the correct answer

Funktionen returnerar omedelbart.

Funktionen returnerar automatiskt ett Promise.

Funktionen tvingas att köras synkront.

Alla parametrar omvandlas till Promises.

Vad är syftet med nyckelordet await?

Select the correct answer

Att pausa en asynkron funktion tills ett Promise är löst.

Att tvinga en funktion att vänta en viss tid.

Att förhindra att någon kod körs innan hela funktionen är klar.

Att skapa ett Promise som alltid lyckas.

Vilken av följande är en fördel med att använda async/await jämfört med .then()-kedjor?

Select the correct answer

Det eliminerar behovet av Promises helt och hållet.

Det möjliggör hantering av flera asynkrona operationer utan fel.

Det ger en mer lättläst kodstruktur som liknar synkron kod.

Det kräver ingen felhantering.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 4

Använda Async/Await för Renare Asynkron Kod

Hur async-funktioner fungerar

Förenkling av löfteskedjor med Async/Await

Felhantering med try...catch i Async/Await

1. Vad gör nyckelordet async när det läggs till en funktion?

2. Vad är syftet med nyckelordet await?

3. Vilken av följande är en fördel med att använda async/await jämfört med .then()-kedjor?

Awesome!

Använda Async/Await för Renare Asynkron Kod

Hur async-funktioner fungerar

Förenkling av löfteskedjor med Async/Await

Felhantering med try...catch i Async/Await

1. Vad gör nyckelordet async när det läggs till en funktion?

2. Vad är syftet med nyckelordet await?

3. Vilken av följande är en fördel med att använda async/await jämfört med .then()-kedjor?

1. Vad gör nyckelordet `async` när det läggs till en funktion?

2. Vad är syftet med nyckelordet `await`?

3. Vilken av följande är en fördel med att använda `async/await` jämfört med `.then()`-kedjor?

1. Vad gör nyckelordet `async` när det läggs till en funktion?

2. Vad är syftet med nyckelordet `await`?

3. Vilken av följande är en fördel med att använda `async/await` jämfört med `.then()`-kedjor?