In deze zelfstudie leert u met behulp van voorbeelden over JavaScript async / await-trefwoorden.
U gebruikt het asynctrefwoord met een functie om aan te geven dat de functie een asynchrone functie is. De async-functie retourneert een belofte.
De syntaxis van asyncfunctie is:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Hier,
- naam - naam van de functie
- parameters - parameters die worden doorgegeven aan de functie
Voorbeeld: Async-functie
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Uitvoer
Async-functie.
In het bovenstaande programma wordt het asyncsleutelwoord vóór de functie gebruikt om aan te geven dat de functie asynchroon is.
Aangezien deze functie een belofte retourneert, kunt u de kettingmethode then()als volgt gebruiken:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Uitvoer
Asynchrone functie 1
In het bovenstaande programma wordt de f()functie opgelost en wordt de then()methode uitgevoerd.
JavaScript wacht op trefwoord
Het awaitsleutelwoord wordt binnen de asyncfunctie gebruikt om te wachten op de asynchrone bewerking.
De syntaxis die moet worden gebruikt, is:
let result = await promise;
Het gebruik van awaitpauzeert de async-functie totdat de belofte een resultaatwaarde (oplossen of afwijzen) retourneert. Bijvoorbeeld,
// 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();
Uitvoer
Belofte opgelost hallo
In het bovenstaande programma wordt een Promiseobject gemaakt en het wordt na 4000 milliseconden opgelost . Hier wordt de asyncFunc()functie geschreven met behulp van de asyncfunctie.
Het awaittrefwoord wacht tot de belofte is voltooid (oplossen of afwijzen).
let result = await promise;
Daarom wordt hallo alleen weergegeven nadat de beloftewaarde beschikbaar is voor de resultaatvariabele.
Als in het bovenstaande programma awaitniet wordt gebruikt, wordt hallo weergegeven voordat de belofte is opgelost.
Werken van async / wachten functie
Opmerking : u kunt awaitalleen binnen async-functies gebruiken.
Met de async-functie kan de asynchrone methode op een schijnbaar synchrone manier worden uitgevoerd. Hoewel de bewerking asynchroon is, lijkt het erop dat de bewerking synchroon wordt uitgevoerd.
Dit kan handig zijn als er meerdere beloftes in het programma staan. Bijvoorbeeld,
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); )
Wacht in het bovenstaande programma awaittot elke belofte is voltooid.
Foutafhandeling
Tijdens het gebruik van de asyncfunctie schrijf je de code synchroon. En u kunt ook de catch()methode gebruiken om de fout op te vangen. Bijvoorbeeld,
asyncFunc().catch( // catch error and do something )
De andere manier om met een fout om te gaan, is door try/catchblock te gebruiken. Bijvoorbeeld,
// 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
In het bovenstaande programma hebben we try/catchblock gebruikt om de fouten af te handelen. Als het programma met succes wordt uitgevoerd, gaat het naar het tryblok. En als het programma een fout genereert, gaat het naar het catchblok.
Ga try/catchnaar JavaScript JavaScript try / catch voor meer informatie.
Voordelen van het gebruik van async-functie
- De code is beter leesbaar dan het gebruik van een callback of een belofte.
- Foutafhandeling is eenvoudiger.
- Foutopsporing is eenvoudiger.
Opmerking : deze twee trefwoorden async/awaitzijn geïntroduceerd in de nieuwere versie van JavaScript (ES8). Sommige oudere browsers ondersteunen het gebruik van async / await. Ga voor meer informatie naar JavaScript async / wacht op browserondersteuning.
