Javascript asynchronní / čeká

V tomto kurzu se na příkladech dozvíte o asynchronních / čekajících klíčových slovech JavaScript.

asyncKlíčové slovo s funkcí použijete k vyjádření, že funkce je asynchronní funkce. Funkce asynchronní vrátí slib.

Syntaxe asyncfunkce je:

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

Tady,

  • name - název funkce
  • parametry - parametry, které jsou předány funkci

Příklad: Asynchronní funkce

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

Výstup

 Asynchronní funkce.

Ve výše uvedeném programu se asyncklíčové slovo používá před funkcí k vyjádření, že funkce je asynchronní.

Protože tato funkce vrací slib, můžete použít metodu řetězení then()takto:

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

Výstup

 Asynchronní funkce 1

Ve výše uvedeném programu je f()funkce vyřešena a then()metoda je spuštěna.

JavaScript čeká na klíčové slovo

awaitKlíčové slovo je použito uvnitř asyncfunkce čekat na asynchronní operace.

Syntaxe, která se má použít, je:

 let result = await promise;

Použití awaitpozastaví asynchronní funkci, dokud slib nevrátí hodnotu výsledku (řešení nebo odmítnutí). Napří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ýstup

 Slib vyřešen ahoj

Ve výše uvedeném programu Promiseje vytvořen objekt, který je vyřešen po 4 000 milisekundách. Zde se asyncFunc()funkce zapisuje pomocí asyncfunkce.

Mezi awaitklíčové slovo čeká na slib, že nebyla úplná (vyřešit nebo zamítnout).

 let result = await promise;

Proto se ahoj zobrazí až poté, co je proměnná výsledku dostupná slibná hodnota.

Pokud se ve výše uvedeném programu awaitnepoužívá, zobrazí se ahoj před vyřešením slibu.

Práce s asynchronní / čekající funkcí

Poznámka : Lze použít awaitpouze uvnitř asynchronních funkcí.

Funkce asynchronní umožňuje provádění asynchronní metody zdánlivě synchronním způsobem. Ačkoli je operace asynchronní, zdá se, že operace je prováděna synchronně.

To může být užitečné, pokud je v programu více slibů. Napří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); )

Ve výše uvedeném programu awaitčeká na dokončení každého slibu.

Vypořádání se s chybou

Při používání této asyncfunkce zapisujete kód synchronním způsobem. catch()Metodu můžete také použít k zachycení chyby. Například,

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

Jiným způsobem, jak můžete zpracovat chybu, je použití try/catchbloku. Napří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

Ve výše uvedeném programu jsme try/catchke zpracování chyb použili blok. Pokud program běží úspěšně, přejde do trybloku. A pokud program hodí chybu, přejde do catchbloku.

Chcete-li se dozvědět více try/catchpodrobností, navštivte JavaScript JavaScript try / catch.

Výhody používání asynchronní funkce

  • Kód je čitelnější než použití zpětného volání nebo slibu.
  • Zpracování chyb je jednodušší.
  • Ladění je jednodušší.

Poznámka : Tato dvě klíčová slova async/awaitbyla zavedena v novější verzi JavaScriptu (ES8). Některé starší prohlížeče nemusí podporovat použití async / await. Chcete-li se dozvědět více, navštivte asynchronní JavaScript / čekejte na podporu prohlížeče.

Zajímavé články...