🥇Käsitleme Async/Await JavaScriptis näidete abil

Artikli autor käsitleb näidete abil Async/Await'i JavaScriptis. Üldiselt on Async/Await mugav viis asünkroonse koodi kirjutamiseks. Enne selle võimaluse tekkimist kirjutati selline kood tagasitulekute ja lubaduste abil. Algse artikli autor toob välja Async/Await'i eelised, käsitledes erinevaid näiteid.

Tuletame meelde: kõigile «Habr» lugejatele – 10 000 rubla allahindlus igale Skillboxi kursusele, kasutades sooduskoodi «Habr».
Skillbox soovitab: Haridusalane veebikursus Java arendaja.

Tagasitulek

Tagasitulek on funktsioon, mille kutsumine on edasi lükatud määramata ajaks. Varem kasutati tagasitulekute võimalust koodikohtades, kus tulemust ei saanud kohe saada.

Siin on näide asünkroonsest failist lugemisest Node.js-is:

fs.readFile(__filename, 'utf-8', (err, data) => {
  if (err) {
    throw err;
  }
  console.log(data);
});

Probleemid tekivad hetkel, kui tuleb teha mitu asünkroonset operatsiooni korraga. Kujutame ette järgmist stsenaariumi: teostatakse päring kasutaja Arfati andmebaasi, tuleb lugeda tema profiilipildi väljatõmbamise url ja laadida pilt serverist someserver.com.
Pärast pildi laadimist konverteerime selle teise vormingusse, näiteks PNG-st JPEG-ks. Kui konverteerimine õnnestub, saadetakse kasutaja e-posti aadressile kiri. Edasi kantakse teave sündmuse kohta faili transformations.log koos kuupäevaga.

Tasub tähelepanu pöörata tagasitulekute üksteise peale ladumisele ja suurele hulgale }) koodi lõpus. Seda nimetatakse Callback Hell'iks või Pyramid of Doom'iks.

Selle meetodi puudused on ilmne:

Seda koodi on keeruline lugeda.
Samuti on selles keeruline vigu käsitleda, mis sageli viib koodi kvaliteedi halvenemiseni.

Selle probleemi lahendamiseks lisati JavaScripti lubadused. Need võimaldavad asendada sügava tagasitulekute pesastatud struktuuri sõnaga .then.

Lubaduste positiivne külg on see, et nende abil on kood palju paremini loetav, liigeldes ülevalt alla, mitte vasakult paremale. Siiski on lubadustel ka oma probleemid:

Tuleb lisada suur hulk .then-e.
Vigade käsitlemiseks kasutatakse .catch'i, mitte try/catch'i.
Mitme lubadusega töötamine ühes tsüklis ei ole kaugeltki alati mugav, mõnel juhul keerukad nad koodi.

Siin on ülesanne, mis näitab viimase punkti olulisust.

Oletame, et on tsükkel for, mis väljastab numbrite jada 0 kuni 10 juhusliku vahega (0–n sekundit). Kasutades lubadusi, tuleb see tsükkel muuta nii, et numbrid väljastataks järjestikku 0 kuni 10. Seega, kui nulli väljastamine kestab 6 sekundit ja ühekümnendat 2 sekundit, siis peaks esmalt olema väljastatud null ja seejärel peaks hakkama ühe väljastamine.

Ja muidugi, selle ülesande lahendamiseks me ei kasuta Async/Await ega .sort. Lahenduse näide on lõpus.

Async-funktsioonid

Async-funktsioonide lisamine ES2017 (ES8) lihtsustas lubadustega töötamist. Tahan märkida, et async-funktsioonid töötavad "lubaduste peal". Need funktsioonid ei kujuta endast kvaliteedi poolest teisi kontseptsioone. Async-funktsioonid mõeldi alternatiivina koodile, mis kasutab lubadusi.

Async/Await annab võimaluse korraldada asünkroonse koodi töötlemine sünkrone stiilis.

Seega, lubaduste tundmine lihtsustab Async/Await mõistmise põhimõtteid.

Süntaks

Tavaliselt koosneb see kahest peamistest sõnast: async ja await. Esimene sõna muudab funktsiooni asünkroonseks. Sellistes funktsioonides on lubatud kasutada await. Igas teises juhus jätab selle funktsiooni kasutamine vea.

// With function declaration
 
async function myFn() {
  // await ...
}
 
// With arrow function
 
const myFn = async () => {
  // await ...
}
 
function myFn() {
  // await fn(); (Syntax Error since no async)
}

Async paigutatakse kohe funktsiooni deklareeringu algusesse ning juhul, kui kasutatakse noolfunktsiooni — märgi "=" ja sulgude vahele.

Need funktsioonid võib paigutada objektidesse meetoditena või kasutada klassi deklareerimisel.

// As an object's method
 
const obj = {
  async getName() {
    return fetch('https://www.example.com');
  }
}
 
// In a class
 
class Obj {
  async getResource() {
    return fetch('https://www.example.com');
  }
}

NB! Tuleb meeles pidada, et klassi konstruktorid ning get- ja set-funktsioonid ei saa olla asünkroonilised.

Semantika ja käitamise reeglid

Async-funktsioonid on põhimõtteliselt sarnased tavalistele JS-funktsioonidele, kuid on ka erandeid.

Nii et async-funktsioonid tagastavad alati lubadusi:

async function fn() {
  return 'hello';
}
fn().then(console.log)
// hello

Eriti, fn tagastab stringi hello. Kuna see on asünkrooniline funktsioon, siis väärtus stringist on mähitud lubadusse konstruktoriga.

Siin on alternatiivne konstruktsioon ilma Async-ta:

function fn() {
  return Promise.resolve('hello');
}
 
fn().then(console.log);
// hello

Sel juhul toimub lubaduse tagastamine "käsitsi". Asünkrooniline funktsioon on alati mähitud uude lubadusse.

Kui tagastatav väärtus on primitiivne, siis async-funktsioon tagastab väärtuse, mähkides selle lubadusse. Kui tagastatav väärtus on aga lubaduse objekt, siis selle lahendamine tagastatakse uues lubaduses.

const p = Promise.resolve('hello')
p instanceof Promise;
// true

Promise.resolve(p) === p;
// true

Kuid mis juhtub, kui asünkroonses funktsioonis tekib viga?

async function foo() {
  throw Error('bar');
}

foo().catch(console.log);

Kui viga ei käsitleta, tagastab foo() lubaduse, millel on tagasilükkamine. Sellisel juhul tagastatakse Promise.resolve asemel Promise.reject, mis sisaldab viga.

Asünkroonsed funktsioonid tagastavad alati lubaduse, olenemata sellest, mida tagastatakse.

Asünkroonsed funktsioonid peatatakse iga await'i korral.

Await mõjutab väljendeid. Seega, kui väljend on lubadus, peatub async-funktsioon kuni lubaduse täitmiseni. Kui väljend ei ole lubadus, muudetakse see lubaduseks läbi Promise.resolve ja siis lõpetatakse.

// utility function to cause delay
// and get random value
 
const delayAndGetRandom = (ms) => {
  return new Promise(resolve => setTimeout(
    () => {
      const val = Math.trunc(Math.random() * 100);
      resolve(val);
    }, ms
  ));
};
 
async function fn() {
  const a = await 9;
  const b = await delayAndGetRandom(1000);
  const c = await 5;
  await delayAndGetRandom(1000);
 
  return a + b * c;
}
 
// Execute fn
fn().then(console.log);

Siin on kir описание, kuidas fn-funktsioon töötab.

Pärast selle kutset muudetakse esimene rida const a = await 9; kujule const a = await Promise.resolve(9);.
Pärast Await'i kasutamist peatub funktsiooni täitmine, kuni a saab oma väärtuse (antud juhul on see 9).
delayAndGetRandom(1000) peatab fn-funktsiooni täitmise, kuni see ise lõpeb (pärast 1 sekundit). See on tegelikult fn-funktsiooni peatamine 1 sekundi jooksul.
delayAndGetRandom(1000) tagastab resolve'i kaudu juhusliku väärtuse, mis siis määratakse muutuja b.
Muutuja c juhtum on sarnane muutuja a juhtumile. Pärast seda peatub kõik sekundiks, kuid seekord delayAndGetRandom(1000) ei tagasta midagi, kuna seda ei ole vajadus.
Lõpuks loetakse väärtused valemi a + b * c kaudu. Tulemuseks mähitakse lubadusse läbi Promise.resolve ja tagastatakse funktsioonist.

Need pausid võivad meenutada generaatoritele ES6-s, kuid sellel on oma põhjused.

Lahendame ülesande

Nüüd vaatame ülesande lahendust, mis oli eelnevalt kirjeldatud.

Funktsioonis finishMyTask kasutatakse Await'i, et oodata selliste toimingute tulemusi nagu queryDatabase, sendEmail, logTaskInFile ja teised. Kui võrrelda seda lahendust lubade kasutamisega, muutub sarnasus selgeks. Siiski muudab Async/Await'i versioon oluliselt lihtsamaks kogu süntaktilise keerukuse. Sellisel juhul pole palju tagasisidefunktsioone ja ahelaid, nagu .then/.catch.

Siin on lahendus numbrite väljundiga, kus on kaks varianti.

const wait = (i, ms) => new Promise(resolve => setTimeout(() => resolve(i), ms));
 
// Implementation One (Using for-loop)
const printNumbers = () => new Promise((resolve) => {
  let pr = Promise.resolve(0);
  for (let i = 1; i <= 10; i += 1) {
    pr = pr.then((val) => {
      console.log(val);
      return wait(i, Math.random() * 1000);
    });
  }
  resolve(pr);
});
 
// Implementation Two (Using Recursion)
 
const printNumbersRecursive = () => {
  return Promise.resolve(0).then(function processNextPromise(i) {
 
    if (i === 10) {
      return undefined;
    }
 
    return wait(i, Math.random() * 1000).then((val) => {
      console.log(val);
      return processNextPromise(i + 1);
    });
  });
};

Siin on lahendus, mis kasutab async-funktsioone.

async function printNumbersUsingAsync() {
  for (let i = 0; i < 10; i++) {
    await wait(i, Math.random() * 1000);
    console.log(i);
  }
}

Vigade käsitlemine

Käsitlemata vead pakitakse rejected lubadusse. Siiski võib async-funktsioonides kasutada try/catch konstruktsiooni, et teha süntaktilist vigade käsitlemist.

async function canRejectOrReturn() {
  // oota üks sekund
  await new Promise(res => setTimeout(res, 1000));

  // Tagasi lükata ~50% tõenäosusega
  if (Math.random() > 0.5) {
    throw new Error('Kahjuks on number liiga suur.')
  }

  return 'täiuslik number';
}

canRejectOrReturn() on asünkroonne funktsioon, mis kas täidab edukalt (‘täiuslik number’) või ebaõnnestub veaga (‘Kahjuks on number liiga suur’).

async function foo() {
  try {
    await canRejectOrReturn();
  } catch (e) {
    return 'viga tabatud';
  }
}

Kuna eespool mainitud näites oodatakse canRejectOrReturn'i täitmist, tõukab enda ebaõnnestumine kaasa catch ploki täitmise. Selle tulemusena lõppeb funktsioon foo kas undefined'iga (kui try plokis ei tagastata midagi) või 'viga tabatud'. Seega ei ole selle funktsiooni ebaõnnestumist, kuna try/catch peaks tegelema funktsiooni foo enda vigadega.

Siin on veel üks näide:

async function foo() {
  try {
    return canRejectOrReturn();
  } catch (e) {
    return 'viga tabatud';
  }
}

On oluline märkida, et näites tagastatakse foo's canRejectOrReturn. Foo lõppeb sel juhul kas 'täiuslik number' või tagastatakse viga Error (‘Kahjuks on number liiga suur’). Catch plokk ei pruugi kunagi täituda.

Probleem on see, et foo tagastab lubaduse, mis on saadud canRejectOrReturn'ilt. Seega muutub funktsiooni foo lahendus canRejectOrReturn'i lahenduseks. Sel juhul koosneb kood vaid kahest reast:

try {
    const promise = canRejectOrReturn();
    return promise;
}

Ja nüüd, mis juhtub, kui kasutada koos await'i ja return'i:

async function foo() {
  try {
    return await canRejectOrReturn();
  } catch (e) {
    return 'viga tabatud';
  }
}

Ülaltoodud koodis lõpetab foo edukalt nii perfect number kui error caught. Siin ei ole tõrkeid. Kuid foo lõpetab canRejectOrReturniga, mitte undefinediga. Veendume selles, eemaldades rea return await canRejectOrReturn():

try {
    const value = await canRejectOrReturn();
    return value;
}
// …

Levinud vead ja karid

Mõnel juhul võib Async/Awaiti kasutamine kaasa tuua vigu.

Unustatud await

Selline asi juhtub üsna tihti — enne lubadust unustatakse võtmesõna await:

async function foo() {
  try {
    canRejectOrReturn();
  } catch (e) {
    return 'caught';
  }
}

Koodis, nagu on nähtav, ei ole ei awaiti ega returni. Seetõttu lõpetab foo alati undefinediga ilma 1 sekundi viivituseta. Kuid lubadus täidetakse. Kui see aga annab vea või tõrke, siis kutsutakse välja UnhandledPromiseRejectionWarning.

Async-funktsioonid tagasisidetes

Async-funktsioone kasutatakse üsna sageli .map või .filter tagasisidena. Näiteks võib tuua funktsiooni fetchPublicReposCount(username), mis tagastab GitHubis avatud repode arvu. Oletame, et meil on kolm kasutajat, kelle kohta me need andmed vajame. Siin on kood selle ülesande täitmiseks:

const url = 'https://api.github.com/users';

// Utility fn to fetch repo counts
const fetchPublicReposCount = async (username) => {
  const response = await fetch(`${url}/${username}`);
  const json = await response.json();
  return json['public_repos'];
}

Me vajame ArfatSalman, octocat, norvigi kontosid. Sellisel juhul teeme järgmist:

const users = [
  'ArfatSalman',
  'octocat',
  'norvig'
];

const counts = users.map(async username => {
  const count = await fetchPublicReposCount(username);
  return count;
});

Tuleb märkida Awaiti kasutamist .map tagasisides. Siin on counts - lubaduste massiiv, ja .map - anonüümne tagasiside iga nimetatud kasutaja jaoks.

Liigne järjestikune awaiti kasutamine

Näiteks vaadake järgmist koodi:

async function fetchAllCounts(users) {
  const counts = [];
  for (let i = 0; i < users.length; i++) {
    const username = users[i];
    const count = await fetchPublicReposCount(username);
    counts.push(count);
  }
  return counts;
}

Siin pannakse muutuja counti arvu repo, seejärel lisatakse see arv massiivi counts. Koodi probleem on selles, et seni, kuni esimese kasutaja andmed serverist ei tule, ootavad kõik järgmised kasutajad. Seega töödeldakse ühel ajal vaid üht kasutajat.

Kui näiteks ühe kasutaja töötlemiseks kulub umbes 300 ms, siis kõigi kasutajate jaoks on see juba sekund, kulutatud aeg sõltub samuti lineaarselt kasutajate arvust. Kuid kuna repo arvu saamine ei sõltu teineteisest, saab protsesse paralleelseteks muuta. Selleks on vajalik töötamine .map ja Promise.all-iga:

async function fetchAllCounts(users) {
  const promises = users.map(async username => {
    const count = await fetchPublicReposCount(username);
    return count;
  });
  return Promise.all(promises);
}

Promise.all võtab sisendis vastu massiivi lubadusi, mis tagastab lubaduse. Viimane lõpetatakse pärast kõigi massiivis olevate lubaduste täitmist või esimese tagasilükkamise korral. Võib juhtuda, et kõik need ei käivitata samal ajal, — selleks, et tagada samaaegne käitamine, saab kasutada p-map'i.

Kokkuvõte

Async-funktsioonid muutuvad arenduses üha olulisemaks. Ja optimaalseteks async-funktsioonide kasutamiseks tasub kasutada Async Iterators. JavaScripti arendaja peab selles hästi orienteeruma.

Skillbox soovitab:

Praktiline kursus «Mobiilne arendaja PRO».

Rakenduslik veebikursus „Andmeanalüütik Pythonis“.

Kaks aastat praktilist kursust «Ma olen PRO veebiarendaja».

Allikas: habr.com

Töötame Async/Await JavaScriptis näidete abil

Tagasitulek

Async-funktsioonid

Lahendame ülesande

Levinud vead ja karid

Kokkuvõte