Async a Await v JavaScripte

Async a Await v JavaScripte sú výkonné kľúčové slová používané na spracovanie asynchrónnych operácií so sľubmi. Async funkcie implicitne vracajú sľuby, zatiaľ čo Await pozastaví vykonávanie, kým sa prísľub nevyrieši. To zjednodušuje asynchrónny kód a zlepšuje čitateľnosť tým, že sa javí ako synchrónny.

Asynchrónna funkcia

The async> funkcia nám umožňuje písať kód založený na prísľuboch, ako keby bol synchrónny. To zaisťuje, že vlákno vykonávania nie je zablokované.

  • Manipulácia s prísľubom : Asynchrónne funkcie vždy vrátia prísľub. Ak sa vráti hodnota, ktorá nie je prísľubom, JavaScript ju automaticky zabalí do vyriešeného prísľubu.

Async syntax

async function myFunction() { return 'Hello'; } 

Príklad: Tu uvidíme základné použitie async v JavaScripte.

javascript
const getData = async () =>{ nech data = 'Ahoj svet';  vrátiť údaje; } getData().then(data => console.log(data)); 

Výkon
Hello World 

Čakanie na kľúčové slovo

The await> kľúčové slovo sa používa na čakanie na vyriešenie prísľubu. Dá sa použiť iba v rámci asynchrónneho bloku.

  • Pozastavenie vykonávania : Await spôsobí, že kód čaká, kým prísľub vráti výsledok, čo umožňuje čistejší a lepšie spravovateľný asynchrónny kód.

Syntax

let value = await promise; 

Príklad : Tento príklad ukazuje základné použitie kľúčového slova wait v jazyku JavaScript.

javascript
const getData = async () =>{ nech y = čaká 'Ahoj svet';  console.log(y); } console.log(1); getData(); console.log(2); 

Výkon
1 2 Hello World 

The async kľúčové slovo transformuje bežnú funkciu JavaScriptu na asynchrónnu funkciu, čo spôsobí, že vráti Promise.

The čakať Kľúčové slovo sa používa vo vnútri asynchronnej funkcie na pozastavenie jej vykonávania a pred pokračovaním čaká na vyriešenie prísľubu.

Príklad Async/Await

Tu budeme implementovať niekoľko prísľubov v metóde a potom túto metódu použijeme na zobrazenie nášho výsledku. Môžete skontrolovať JS syntax async/wait v príklade.

Javascript
function asynchronous_operational_method() {  let first_promise =   new Promise((resolve, reject) =>vyriešiť('Dobrý deň'));  nech second_promise = new Promise((vyriešiť, odmietnuť) => { setTimeout(() => { resolve(' techcodeview.com..'); }, 1000; });  nech combined_promise = Promise.all([prvý_sľub, druhý_sľub]);  návrat kombinovaný_sľub; } async function display() { let data = wait asynchronous_operational_method();  console.log(data); } display(); 

Výkon:

[ 'Hello', ' techcodeview.com..' ] 

Vysvetlenie:

  1. Stvorenie sľubu :
    • Vytvárajú sa dva prísľuby: jeden sa vyrieši okamžite pomocou Hello a druhý sa vyrieši po 1 sekunde pomocou techcodeview.com...
  2. Kombinácia sľubov :
    • Metóda Promise.all() kombinuje oba prísľuby do jedného prísľubu, combined_promise.
  3. Asynchrónna funkcia :
    • Funkcia display() je deklarovaná ako asynchrónna, čo znamená, že obsahuje asynchrónne operácie.
  4. Čaká sa na uznesenie sľubu :
    • Kľúčové slovo wait pozastaví vykonávanie, kým sa nevyrieši combined_promise.
  5. Výsledok protokolovania :
    • Vyriešené pole z combined_promise sa prihlási do konzoly.

Poznámka

Komu vyriešiť a odmietnuť sú preddefinované argumenty JavaScriptom.

  • funkcia resolve sa používa, keď je dokončená asynchrónna úloha a vracia výsledok.
  • funkcia odmietnutia sa používa, keď asynchrónna úloha zlyhá a vráti dôvody zlyhania.

Výhody Async a Await

  1. Vylepšená čitateľnosť : Async a Await umožňujú písanie asynchrónneho kódu v synchrónnom štýle, čo uľahčuje čítanie a pochopenie.
  2. Spracovanie chýb : Použitie blokov try/catch s async/wait zjednodušuje spracovanie chýb.
  3. Vyhýba sa peklu spätného volania : Async a Await pomáhajú vyhnúť sa vnoreným spätným volaniam a zložitým reťazcom prísľubov.
  4. Lepšie ladenie : Ladenie asynchrónneho/čakajúceho kódu je intuitívnejšie, pretože sa správa ako synchrónny kód.

Záver

Async a Await v JavaScripte spôsobili revolúciu v asynchrónnom programovaní tým, že kód bol čitateľnejší a udržovateľnejší. Tým, že umožňujú písať asynchrónny kód v synchrónnom štýle, znižujú zložitosť spojenú so spätnými volaniami a sľubným reťazením. Porozumenie a efektívne používanie asynchrónneho a čakania môže výrazne zlepšiť vaše znalosti programovania v jazyku JavaScript, čím vám uľahčí zvládanie asynchrónnych operácií vo vašich projektoch.

Podporované prehliadače:

Prehliadače podporované JS Funkcia Async/Await sú uvedené nižšie:

  • Google Chrome 55 a novší
  • Firefox 52 a vyššie
  • Apple Safari 10.1 a vyššie
  • Opera 42 a vyššie
  • Edge 14 a vyššie