Asynchronizácia / čakanie na Javascript

V tomto tutoriáli sa pomocou príkladov dozviete o asynchrónnych / čakajúcich kľúčových slovách JavaScriptu.

asyncKľúčové slovo s funkciou použijete na vyjadrenie, že funkcia je asynchrónna. Asynchronná funkcia vráti prísľub.

Syntax asyncfunkcie 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 asynckľúč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

awaitKľúčové slovo je použité vo vnútri asyncfunkcie čakať na asynchrónne operácie.

Syntax, ktorá sa má použiť, je:

 let result = await promise;

Použitie awaitpozastaví 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í Promiseobjekt, ktorý sa vyrieši po 4 000 milisekundách. Tu sa asyncFunc()funkcia zapisuje pomocou asyncfunkcie.

Medzi awaitkľúč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 awaitnepoužíva, zobrazí sa ahoj pred vyriešením sľubu.

Pracovanie s funkciou asynchronizácie / čakania

Poznámka : Môžete použiť awaitiba 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 asyncfunkcie 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/catchbloku. 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/catchna spracovanie chýb použili blok. Ak program beží úspešne, prejde do trybloku. A ak program vyhodí chybu, prejde do catchbloku.

Ak sa chcete dozvedieť viac try/catchpodrobností, 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/awaitboli 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.

Zaujímavé články...