Tässä opetusohjelmassa opit JavaScriptin asynkronoimisesta / odottavista avainsanoista esimerkkien avulla.
Käytät asyncavainsanaa funktion kanssa osoittamaan, että funktio on asynkroninen toiminto. Async-funktio palauttaa lupauksen.
Toiminnon syntaksi asyncon:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Tässä,
- nimi - toiminnon nimi
- parametrit - parametrit, jotka välitetään funktiolle
Esimerkki: Asynkronitoiminto
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Tuotos
Asynkronitoiminto.
Yllä olevassa ohjelmassa asyncavainsanaa käytetään ennen funktiota osoittamaan, että toiminto on asynkroninen.
Koska tämä toiminto palauttaa lupauksen, voit käyttää ketjutustapaa then()seuraavasti:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Tuotos
Asynkronitoiminto 1
Yllä olevassa ohjelmassa f()toiminto ratkaistaan ja then()menetelmä suoritetaan.
JavaScript odottaa avainsanaa
awaitAvainsanaa käytetään sisällä asynctoiminto odottamaan asynkronisen toiminnan.
Odottavan syntaksin nimi on:
let result = await promise;
awaitAsynkronointitoiminnon käyttö keskeyttää, kunnes lupaus palauttaa tuloksen (ratkaise tai hylkää) arvon. Esimerkiksi,
// 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();
Tuotos
Lupaus ratkaissut hei
Yllä olevassa ohjelmassa luodaan Promiseobjekti, joka ratkaistaan 4000 millisekunnin kuluttua . Tässä asyncFunc()funktio kirjoitetaan asyncfunktiolla.
awaitAvainsana odottaa lupaus olisi täydellinen (ratkaista tai hylkää).
let result = await promise;
Hei näytetään vasta sen jälkeen, kun tulosmuuttujalle on saatu lupa-arvo.
Jos yllä olevassa ohjelmassa awaitei käytetä, hei näytetään, ennen kuin lupaus on ratkaistu.
Async / await-toiminto toimii
Huomaa : Voit käyttää awaitvain asynkronointitoimintojen sisällä.
Asynkronitoiminto mahdollistaa asynkronisen menetelmän suorittamisen näennäisesti synkronisella tavalla. Vaikka operaatio on asynkroninen, näyttää siltä, että operaatio suoritetaan synkronisesti.
Tästä voi olla hyötyä, jos ohjelmassa on useita lupauksia. Esimerkiksi,
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); )
Odota yllä olevassa ohjelmassa, awaitettä kukin lupaus on valmis.
Virheiden käsittely
Kun käytät asynctoimintoa, kirjoitat koodin synkronisesti. Ja voit myös käyttää catch()menetelmää virheen havaitsemiseksi. Esimerkiksi,
asyncFunc().catch( // catch error and do something )
Toinen tapa käsitellä virhettä on try/catchestää. Esimerkiksi,
// 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
Yllä olevassa ohjelmassa olemme käyttäneet try/catchlohkoa virheiden käsittelemiseen. Jos ohjelma toimii onnistuneesti, se siirtyy trylohkoon. Ja jos ohjelma heittää virheen, se menee catchlohkoon.
Jos haluat lisätietoja try/catchyksityiskohdista, käy JavaScript-JavaScript-kokeilussa.
Asynkronitoiminnon käytön edut
- Koodi on helpommin luettavissa kuin soittopyyntö tai lupaus.
- Virhekäsittely on yksinkertaisempaa.
- Virheenkorjaus on helpompaa.
Huomaa : Nämä kaksi avainsanaa async/awaitotettiin käyttöön uudemmassa JavaScript-versiossa (ES8). Jotkin vanhemmat selaimet eivät ehkä tue async / await -toiminnon käyttöä. Jos haluat lisätietoja, käy JavaScript async / odota selaimen tukea.
