I denna handledning lär du dig om JavaScript-synkronisering / väntar på sökord med hjälp av exempel.
Du använder asyncnyckelordet med en funktion för att representera att funktionen är en asynkron funktion. Async-funktionen returnerar ett löfte.
asyncFunktionens syntax är:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Här,
- namn - funktionens namn
- parametrar - parametrar som skickas till funktionen
Exempel: Async-funktion
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Produktion
Async-funktion.
I ovanstående program används asyncnyckelordet före funktionen för att representera att funktionen är asynkron.
Eftersom den här funktionen ger ett löfte kan du använda kedjningsmetoden then()så här:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Produktion
Async-funktion 1
I programmet ovan f()löses funktionen och then()metoden körs.
JavaScript väntar på nyckelord
Det awaitsökord används inuti asyncfunktionen för att vänta på asynkron drift.
Syntaxen att använda väntar är:
let result = await promise;
Användningen av awaitpausar async-funktionen tills löftet returnerar ett resultatvärde (lösa eller avvisa). Till exempel,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( // wait until the promise resolves let result = await promise; console.log(result); console.log('hello'); ) // calling the async function asyncFunc();
Produktion
Löftet löst hej
I ovanstående program Promiseskapas ett objekt och det löses efter 4000 millisekunder. Här asyncFunc()skrivs asyncfunktionen med hjälp av funktionen.
De awaitsökord väntar på löftet att vara fullständig (lösa eller avvisa).
let result = await promise;
Därför visas hej först efter att löftesvärde är tillgängligt för resultatvariabeln.
I ovanstående program, om det awaitinte används, visas hej innan löftet lösts.
Arbeta med asynk / vänta-funktion
Obs! Du kan awaitendast använda inuti async-funktioner.
Async-funktionen tillåter att den asynkrona metoden körs på ett synkront sätt. Även om operationen är asynkron verkar det som om operationen utförs på ett synkront sätt.
Detta kan vara användbart om det finns flera löften i programmet. Till exempel,
let promise1; let promise2; let promise3; async function asyncFunc() ( let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result1); console.log(result1); )
I ovanstående program awaitväntar varje löftet att vara fullständigt.
Felhantering
När du använder asyncfunktionen skriver du koden på ett synkront sätt. Och du kan också använda catch()metoden för att fånga felet. Till exempel,
asyncFunc().catch( // catch error and do something )
Det andra sättet du kan hantera ett fel på är att använda try/catchblock. Till exempel,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( try ( // wait until the promise resolves let result = await promise; console.log(result); ) catch(error) ( console.log(error); ) ) // calling the async function asyncFunc(); // Promise resolved
I ovanstående program har vi använt try/catchblock för att hantera felen. Om programmet körs kommer det att gå till tryblocket. Och om programmet ger ett fel kommer det att gå till catchblocket.
För att lära dig mer om try/catchi detalj, besök JavaScript JavaScript try / catch.
Fördelar med att använda async-funktion
- Koden är mer läsbar än att använda en återuppringning eller ett löfte.
- Felhantering är enklare.
- Felsökning är lättare.
Obs! Dessa två nyckelord async/awaitintroducerades i den nyare versionen av JavaScript (ES8). Vissa äldre webbläsare stöder kanske inte användningen av asynkronisering / väntar. För att lära dig mer, besök JavaScript async / vänta webbläsarsupport.
