Async och Await in JavaScript är kraftfulla nyckelord som används för att hantera asynkrona operationer med löften. Async-funktioner returnerar implicit löften, medan Await pausar exekveringen tills löftet är löst. Detta förenklar asynkron kod och förbättrar läsbarheten genom att få den att se synkron ut.

Asynkron funktion

Deasync>funktionen låter oss skriva löftesbaserad kod som om den vore synkron. Detta säkerställer att exekveringstråden inte blockeras.

handledning för react js

• Löfteshantering : Asynkrona funktioner returnerar alltid ett löfte. Om ett värde returneras som inte är ett löfte, omsluter JavaScript det automatiskt i ett löst löfte.

Asynkron syntax

async function myFunction() { return 'Hello'; }>

Exempel: Här kommer vi att se den grundläggande användningen av asynkron i JavaScript.

const getData = async () =>{ let data = 'Hej världen';  returnera data; } getData().then(data => console.log(data));>

Hello World>

Invänta nyckelord

Deawait>nyckelord används för att vänta på att ett löfte ska lösas. Det kan endast användas inom ett asynkront block.

• Utförandepaus : Await får koden att vänta tills löftet returnerar ett resultat, vilket möjliggör renare och mer hanterbar asynkron kod.

Syntax

let value = await promise;>

Exempel : Det här exemplet visar den grundläggande användningen av nyckelordet await i JavaScript.

const getData = async () =>{ let y = await 'Hej världen';  console.log(y); } console.log(1); hämta data(); console.log(2);>

1 2 Hello World>

De asynkron nyckelord omvandlar en vanlig JavaScript-funktion till en asynkron funktion, vilket gör att den returnerar ett löfte.

De vänta nyckelordet används i en asynkfunktion för att pausa dess exekvering och vänta på att ett löfte ska lösas innan du fortsätter.

java volatile nyckelord

Async/Await Exempel

Här kommer vi att implementera flera löften i en metod, och sedan kommer vi att använda den metoden för att visa vårt resultat. Du kan kontrollera JS asynkronisera/vänta syntax i exemplet.

function asynchronous_operational_method() {  let first_promise =   new Promise((resolve, reject) =>resolve('Hej'));  låt second_promise = new Promise((lösa, avvisa) => { setTimeout(() => { resolve(' techcodeview.com..'); }, 1000); });  let combined_promise = Promise.all([första_löfte, andra_löfte]);  returnera combined_promise; } async function display() { let data = await asynchronous_operational_method();  console.log(data); } display();>

Produktion:

maven installera

[ 'Hello', ' techcodeview.com..' ]>

Förklaring:

1. Lova skapelse :
   • Två löften skapas: ett löser sig omedelbart med Hello, och det andra löser sig efter 1 sekund med techcodeview.com...
2. Kombinera löften :
   • Metoden Promise.all() kombinerar båda löftena till ett enda löfte, combined_promise.
3. Asynkron funktion :
   • Display()-funktionen deklareras som asynkron, vilket indikerar att den innehåller asynkrona operationer.
4. Väntar på löfteslösning :
   • Nyckelordet await pausar körningen tills combined_promise är löst.
5. Loggningsresultat :
   • Den lösta arrayen från combined_promise loggas till konsolen.

Notera

Till lösa och avvisa är fördefinierade argument av JavaScript.

• resolve-funktionen används när en asynkron uppgift är klar och returnerar resultatet.
• avvisningsfunktionen används när en asynkron uppgift misslyckas och returnerar orsaker till fel.

Fördelar med Async och Await

1. Förbättrad läsbarhet : Async och Await tillåter asynkron kod att skrivas i en synkron stil, vilket gör det lättare att läsa och förstå.
2. Felhantering : Att använda try/catch-block med async/await gör felhanteringen enkel.
3. Undviker Callback Hell : Async och Await hjälper till att undvika kapslade återuppringningar och komplexa löfteskedjor.
4. Bättre felsökning : Felsökning av asynkron/vänta-kod är mer intuitivt eftersom det beter sig som synkron kod.

Slutsats

Async och Await in JavaScript har revolutionerat asynkron programmering genom att göra koden mer läsbar och underhållbar. Genom att tillåta asynkron kod att skrivas i en synkron stil, minskar de komplexiteten i samband med återuppringningar och lovar kedja. Att förstå och använda asynkron och vänta effektivt kan förbättra dina JavaScript-programmeringsfärdigheter avsevärt, vilket gör det lättare att hantera asynkrona operationer i dina projekt.

Webbläsare som stöds:

Webbläsarna som stöds av JS Async/Await-funktion listas nedan:

• Google Chrome 55 och senare
• Firefox 52 och senare
• Apple Safari 10.1 och senare
• Opera 42 och uppåt
• Kant 14 och uppåt