I denne vejledning lærer du om JavaScript async / afventer nøgleord ved hjælp af eksempler.
Du bruger asyncnøgleordet med en funktion til at repræsentere, at funktionen er en asynkron funktion. Async-funktionen returnerer et løfte.
Funktionens syntaks asyncer:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Her,
- navn - funktionens navn
- parametre - parametre, der overføres til funktionen
Eksempel: Async-funktion
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Produktion
Async-funktion.
I ovenstående program asyncbruges nøgleordet før funktionen til at repræsentere, at funktionen er asynkron.
Da denne funktion returnerer et løfte, kan du bruge kædemetoden then()som denne:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Produktion
Async-funktion 1
I ovenstående program f()løses funktionen, og then()metoden udføres.
JavaScript afventer søgeord
Den awaitsøgeord bruges inde i asyncfunktionen til at vente på den asynkrone drift.
Syntaksen, der skal bruges, afventer:
let result = await promise;
Brug af awaitpauser async-funktionen, indtil løftet returnerer en resultatværdi (løsning eller afvisning). For eksempel,
// 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 ovenstående program Promiseoprettes et objekt, og det løses efter 4000 millisekunder. Her asyncFunc()skrives asyncfunktionen ved hjælp af funktionen.
De awaitsøgeord venter løftet om at være komplet (beslutter eller afvise).
let result = await promise;
Derfor vises hej kun, når løfteværdien er tilgængelig for resultatvariablen.
I ovenstående program, hvis awaitikke bruges, vises hej, før løftet er løst.
Arbejde med async / afvente funktion
Bemærk : Du kan awaitkun bruge inde i async-funktioner.
Asynk-funktionen gør det muligt at udføre den asynkrone metode på en tilsyneladende synkron måde. Selvom operationen er asynkron, ser det ud til, at operationen udføres synkront.
Dette kan være nyttigt, hvis der er flere løfter i programmet. For eksempel,
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 ovenstående program awaitventer på, at hvert løfte er komplet.
Fejlhåndtering
Mens du bruger asyncfunktionen, skriver du koden synkront. Og du kan også bruge catch()metoden til at fange fejlen. For eksempel,
asyncFunc().catch( // catch error and do something )
Den anden måde, du kan håndtere en fejl på, er ved hjælp af try/catchblok. For eksempel,
// 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 ovenstående program har vi brugt try/catchblok til at håndtere fejlene. Hvis programmet kører med succes, går det til tryblokken. Og hvis programmet kaster en fejl, går det til catchblokken.
Hvis du vil lære mere om try/catchi detaljer, skal du besøge JavaScript prøve / fangst.
Fordele ved at bruge async-funktion
- Koden er mere læselig end at bruge et tilbagekald eller et løfte.
- Fejlhåndtering er enklere.
- Fejlretning er lettere.
Bemærk : Disse to nøgleord async/awaitblev introduceret i den nyere version af JavaScript (ES8). Nogle ældre browsere understøtter muligvis ikke brugen af asynkronisering / afventning. Hvis du vil vide mere, skal du besøge JavaScript async / afvente browsersupport.
