V tomto tutoriáli sa pomocou príkladov dozviete o asynchrónnych / čakajúcich kľúčových slovách JavaScriptu.
async
Kľúčové slovo s funkciou použijete na vyjadrenie, že funkcia je asynchrónna. Asynchronná funkcia vráti prísľub.
Syntax async
funkcie je:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Tu,
- name - názov funkcie
- parametre - parametre, ktoré sa odovzdávajú funkcii
Príklad: Asynchronná funkcia
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Výkon
Asynchronná funkcia.
Vo vyššie uvedenom programe sa async
kľúčové slovo používa pred funkciou na vyjadrenie toho, že funkcia je asynchrónna.
Pretože táto funkcia vracia prísľub, môžete použiť metódu reťazenia then()
takto:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Výkon
Asynchronná funkcia 1
Vo vyššie uvedenom programe je f()
funkcia vyriešená a then()
metóda je vykonaná.
JavaScript čaká na kľúčové slovo
await
Kľúčové slovo je použité vo vnútri async
funkcie čakať na asynchrónne operácie.
Syntax, ktorá sa má použiť, je:
let result = await promise;
Použitie await
pozastaví asynchronnú funkciu, kým sľub nevráti hodnotu výsledku (vyriešenie alebo odmietnutie). Napríklad,
// 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();
Výkon
Sľub vyriešený ahoj
Vo vyššie uvedenom programe sa vytvorí Promise
objekt, ktorý sa vyrieši po 4 000 milisekundách. Tu sa asyncFunc()
funkcia zapisuje pomocou async
funkcie.
Medzi await
kľúčové slovo čaká na sľub, že nebola úplná (vyriešiť alebo zamietnuť).
let result = await promise;
Preto sa ahoj zobrazí až potom, ako je premennej výsledku k dispozícii sľubná hodnota.
Ak sa vo vyššie uvedenom programe await
nepoužíva, zobrazí sa ahoj pred vyriešením sľubu.
Poznámka : Môžete použiť await
iba vo vnútri asynchronných funkcií.
Funkcia asynchrónne umožňuje vykonávanie asynchrónnej metódy zdanlivo synchrónnym spôsobom. Aj keď je operácia asynchrónna, zdá sa, že je vykonávaná synchrónnym spôsobom.
To môže byť užitočné, ak je v programe viac sľubov. Napríklad,
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); )
Vo vyššie uvedenom programe sa await
čaká na splnenie každého sľubu.
Spracovanie chyby
Pri pouľívaní tejto async
funkcie vypisujete kód synchrónnym spôsobom. Môžete tiež použiť catch()
metódu na zachytenie chyby. Napríklad,
asyncFunc().catch( // catch error and do something )
Ďalším spôsobom, ako môžete chybu spracovať, je použitie try/catch
bloku. Napríklad,
// 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
Vo vyššie uvedenom programe sme try/catch
na spracovanie chýb použili blok. Ak program beží úspešne, prejde do try
bloku. A ak program vyhodí chybu, prejde do catch
bloku.
Ak sa chcete dozvedieť viac try/catch
podrobností, navštívte JavaScript JavaScript try / catch.
Výhody používania asynchronnej funkcie
- Kód je čitateľnejší ako použitie spätného volania alebo prísľubu.
- Spracovanie chýb je jednoduchšie.
- Ladenie je jednoduchšie.
Poznámka : Tieto dve kľúčové slová async/await
boli zavedené v novšej verzii JavaScriptu (ES8). Niektoré staršie prehliadače nemusia podporovať asynchronizáciu / čakanie. Ak sa chcete dozvedieť viac, navštívte asynchrónny JavaScript / čakajte na podporu prehliadača.