Ebben az oktatóanyagban példák segítségével megismerheti a JavaScript async / await kulcsszavakat.
A asynckulcsszót egy függvénnyel használja annak ábrázolására, hogy a függvény aszinkron függvény. Az aszinkron függvény ígéretet ad vissza.
A asyncfüggvény szintaxisa :
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Itt,
- név - a függvény neve
- paraméterek - a függvénynek átadott paraméterek
Példa: Async függvény
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Kimenet
Async funkció.
A fenti programban a asynckulcsszót a függvény előtt használják annak jelzésére, hogy a függvény aszinkron.
Mivel ez a függvény ígéretet ad, használhatja a következő láncolási módszert then():
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Kimenet
Async függvény 1
A fenti programban a f()függvény feloldódik, és a then()metódus végrehajtásra kerül.
A JavaScript várja a kulcsszót
A awaitkulcsszót a asyncfüggvényen belül várják az aszinkron működésre.
A várakozni kívánt szintaxis a következő:
let result = await promise;
Az awaitaszinkron függvény szüneteltetése mindaddig, amíg az ígéret eredményt (felold vagy elutasít) nem ad vissza. Például,
// 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();
Kimenet
Ígéret megoldva hello
A fenti programban Promiselétrejön egy objektum, és 4000 milliszekundum után feloldódik . Itt a asyncFunc()függvény a függvény segítségével íródik async.
A awaitkulcsszó arra vár, hogy az ígéret teljes legyen (elutasítás vagy elutasítás).
let result = await promise;
Ezért a helló csak akkor jelenik meg, ha az ígéret értéke rendelkezésre áll az eredményváltozó számára.
Ha a fenti programban awaitnem használjuk , akkor az üdvözlet megjelenik, mielőtt az Ígéret megoldódott.
Az async / wait funkció működése
Megjegyzés : awaitCsak az aszinkron függvényeken belül használható .
Az aszinkron funkció lehetővé teszi az aszinkron módszer látszólagos szinkron módon történő végrehajtását. Bár a művelet aszinkron, úgy tűnik, hogy a műveletet szinkron módon hajtják végre.
Ez akkor lehet hasznos, ha több ígéret szerepel a programban. Például,
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); )
A fenti programban awaitvárja meg minden ígéret teljesítését.
Hibakezelés
A asyncfunkció használata közben szinkron módon írja a kódot. És a catch()módszerrel is elkaphatja a hibát. Például,
asyncFunc().catch( // catch error and do something )
A hiba másik kezelési módja a try/catchblokk használata . Például,
// 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
A fenti programban try/catchblokkot használtunk a hibák kezelésére. Ha a program sikeresen fut, akkor a tryblokkra kerül. És ha a program hibát dob, akkor a catchblokkra megy .
Ha try/catchrészletesebben szeretne többet megtudni , látogasson el a JavaScript JavaScript try / catch oldalára.
Az aszinkron funkció használatának előnyei
- A kód olvashatóbb, mint egy visszahívás vagy egy ígéret használata.
- A hibakezelés egyszerűbb.
- A hibakeresés könnyebb.
Megjegyzés : Ez a két kulcsszó async/awaita JavaScript újabb verziójában (ES8) került bevezetésre. Egyes régebbi böngészők nem támogatják az async / await használatát. További információkért látogasson el a JavaScript async oldalára / várja a böngésző támogatását.
