I denne opplæringen vil du lære om JavaScript async / avvente nøkkelord ved hjelp av eksempler.
Du bruker asyncnøkkelordet med en funksjon for å representere at funksjonen er en asynkron funksjon. Async-funksjonen gir et løfte.
Syntaksen for asyncfunksjonen er:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Her,
- navn - funksjonens navn
- parametere - parametere som sendes til funksjonen
Eksempel: Async-funksjon
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Produksjon
Async-funksjon.
I programmet ovenfor asyncbrukes nøkkelordet før funksjonen for å representere at funksjonen er asynkron.
Siden denne funksjonen gir et løfte, kan du bruke kjedemetoden then()slik:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Produksjon
Asynkroniseringsfunksjon 1
I det ovennevnte programmet f()løses funksjonen og then()metoden blir utført.
JavaScript venter på nøkkelordet
Den awaitnøkkelordet brukes inne i asyncfunksjonen for å vente på asynkron operasjon.
Syntaksen du vil vente på er:
let result = await promise;
Bruk av awaitpauser async-funksjonen til løftet returnerer en resultatverdi (løse eller avvise). 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();
Produksjon
Løftet løst hei
I det ovennevnte programmet Promiseopprettes et objekt og det løses etter 4000 millisekunder. Her asyncFunc()skrives asyncfunksjonen ved hjelp av funksjonen.
De awaitsøkeord venter på at løfte om å være fullstendig (løse eller avvise).
let result = await promise;
Derfor blir hei bare vist etter at løfteverdien er tilgjengelig for resultatvariabelen.
I det ovennevnte programmet, hvis awaitikke brukes, blir hei vist før løftet er løst.
Arbeid med asynkronisering / avvente-funksjon
Merk : Du kan awaitbare bruke innsiden av asynkroniseringsfunksjonene.
Asynk-funksjonen gjør at den asynkrone metoden kan utføres på en tilsynelatende synkron måte. Selv om operasjonen er asynkron, ser det ut til at operasjonen utføres synkront.
Dette kan være nyttig hvis det 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 programmet ovenfor awaitventer på at hvert løfte skal være komplett.
Feilhåndtering
Mens du bruker asyncfunksjonen, skriver du koden på en synkron måte. Og du kan også bruke catch()metoden for å fange feilen. For eksempel,
asyncFunc().catch( // catch error and do something )
Den andre måten du kan håndtere en feil på er å bruke try/catchblock. 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 programmet ovenfor har vi brukt try/catchblokk for å håndtere feilene. Hvis programmet kjører vellykket, vil det gå til tryblokken. Og hvis programmet kaster en feil, vil det gå til catchblokken.
Hvis du vil lære mer om try/catchi detalj, kan du gå til JavaScript try / catch.
Fordeler med å bruke async-funksjon
- Koden er mer leselig enn å bruke tilbakeringing eller et løfte.
- Feilhåndtering er enklere.
- Feilsøking er lettere.
Merk : Disse to nøkkelordene async/awaitble introdusert i den nyere versjonen av JavaScript (ES8). Noen eldre nettlesere støtter kanskje ikke bruk av asynkronisering / venting. Hvis du vil vite mer, kan du gå til JavaScript async / venter på nettleserstøtte.
