Javscript async / await

U ovom ćete tutorijalu uz primjere naučiti o ključnim riječima async / await JavaScript.

Koristite asyncključnu riječ s funkcijom da predstavite da je funkcija asinkrona funkcija. Funkcija asinkronizacije vraća obećanje.

Sintaksa asyncfunkcije je:

 async function name(parameter1, parameter2,… paramaterN) ( // statements )

Ovdje,

  • ime - naziv funkcije
  • parametri - parametri koji se prosljeđuju funkciji

Primjer: Async funkcija

 // async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f(); 

Izlaz

 Async funkcija.

U gore navedenom programu asyncključna riječ koristi se prije funkcije da bi prikazala da je funkcija asinkrona.

Budući da ova funkcija vraća obećanje, možete koristiti metodu ulančavanja then()poput ove:

 async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));

Izlaz

 Funkcija asinkronizacije 1

U gore navedenom programu f()funkcija je riješena i then()metoda se izvršava.

JavaScript čeka ključnu riječ

awaitKljučna riječ se koristi unutar asyncfunkcije čekati za asinkroni rad.

Sintaksa koju treba koristiti await je:

 let result = await promise;

Korištenje awaitzaustavlja funkciju asinkronizacije sve dok obećanje ne vrati vrijednost rezultata (razriješi ili odbaci). Na primjer,

 // 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();

Izlaz

 Obećanje riješeno pozdrav

U gore navedenom programu stvara se Promiseobjekt koji se rješava nakon 4000 milisekundi. Ovdje je asyncFunc()funkcija napisana pomoću asyncfunkcije.

Na awaitčeka ključne riječi za obećanje da se kompletna (odlučnost ili odbiti).

 let result = await promise;

Dakle, pozdrav se prikazuje tek nakon što je vrijednost obećanja dostupna varijabli rezultata.

U gornjem programu, ako awaitse ne koristi, prikazuje se zdravo prije nego što je Promise riješeno.

Rad funkcije async / await

Napomena : Možete koristiti awaitsamo unutar async funkcija.

Funkcija asinkronizacije omogućuje izvršavanje asinkrone metode na naizgled sinkroni način. Iako je operacija asinkrona, čini se da se operacija izvršava sinkrono.

To može biti korisno ako u programu postoji više obećanja. Na primjer,

 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); )

U gore navedenom programu awaitčeka da se svako obećanje ispuni.

Rukovanje pogreškama

Dok koristite asyncfunkciju, kôd pišete sinkrono. A također možete koristiti catch()metodu za hvatanje pogreške. Na primjer,

 asyncFunc().catch( // catch error and do something )

Drugi način na koji možete riješiti pogrešku je pomoću try/catchbloka. Na primjer,

 // 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

U gore navedenom programu koristili smo try/catchblok za rukovanje pogreškama. Ako se program uspješno izvodi, preći će na tryblok. A ako program baci pogrešku, preći će na catchblok.

Da biste saznali više o try/catchdetaljima, posjetite JavaScript JavaScript try / catch.

Prednosti upotrebe funkcije asinkronizacije

  • Kôd je čitljiviji od korištenja povratnog poziva ili obećanja.
  • Rukovanje pogreškama je jednostavnije.
  • Otklanjanje pogrešaka je lakše.

Napomena : Ove dvije ključne riječi async/awaitpredstavljene su u novijoj verziji JavaScript-a (ES8). Neki stariji preglednici možda ne podržavaju upotrebu async / await. Da biste saznali više, posjetite podršku za preglednik async / await JavaScript.

Zanimljivi članci...