Apskatīsim JavaScript/Async/Await, izmantojot piemērus

Raksta autors aplūko JavaScript/Async/Await piemērus. Kopumā Async/Await ir ērts veids, kā rakstīt asinhrono kodu. Pirms šīs funkcijas parādīšanās šāds kods tika rakstīts, izmantojot atzvanus un solījumus. Sākotnējā raksta autors, analizējot dažādus piemērus, atklāj Async/Await priekšrocības.

Atgādinām: visiem "Habr" lasītājiem - atlaide 10 000 rubļu, reģistrējoties jebkurā Skillbox kursā, izmantojot "Habr" reklāmas kodu.

Skillbox iesaka: Izglītojošs tiešsaistes kurss "Java izstrādātājs".

Atzvans

Atzvanīšana ir funkcija, kuras zvans tiek aizkavēts uz nenoteiktu laiku. Iepriekš atzvanīšana tika izmantota tajos koda apgabalos, kur rezultātu nevarēja iegūt uzreiz.

Šeit ir piemērs faila asinhronai lasīšanai pakalpojumā Node.js:

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

Problēmas rodas, ja vienlaikus ir jāveic vairākas asinhronas darbības. Iedomāsimies šādu scenāriju: tiek veikts pieprasījums Arfat lietotāju datu bāzei, jāizlasa tās profils_img_url lauks un jālejupielādē attēls no servera someserver.com.
Pēc lejupielādes mēs pārvēršam attēlu citā formātā, piemēram, no PNG uz JPEG. Ja konvertēšana bija veiksmīga, uz lietotāja e-pastu tiek nosūtīta vēstule. Tālāk informācija par notikumu tiek ievadīta transformations.log failā, norādot datumu.

Ir vērts pievērst uzmanību atzvanīšanas pārklāšanās un lielajam }) skaitam koda pēdējā daļā. To sauc par Atzvanīšanas elli vai Nolemtības piramīdu.

Šīs metodes trūkumi ir acīmredzami:

• Šo kodu ir grūti nolasīt.
• Ir arī grūti rīkoties ar kļūdām, kas bieži noved pie sliktas koda kvalitātes.

Lai atrisinātu šo problēmu, JavaScript tika pievienoti solījumi. Tie ļauj aizstāt atzvanīšanas dziļo ligzdošanu ar vārdu .then.

Solījumu pozitīvais aspekts ir tas, ka tie padara kodu daudz labāk lasāmu, no augšas uz leju, nevis no kreisās uz labo pusi. Tomēr solījumiem ir arī savas problēmas:

• Jums jāpievieno daudz .tad.
• Try/catch vietā, lai apstrādātu visas kļūdas, tiek izmantots .catch.
• Darbs ar vairākiem solījumiem vienā cilpā ne vienmēr ir ērti; dažos gadījumos tie sarežģī kodu.

Šeit ir problēma, kas parādīs pēdējā punkta nozīmi.

Pieņemsim, ka mums ir for cilpa, kas izdrukā skaitļu virkni no 0 līdz 10 ar nejaušiem intervāliem (0–n sekundes). Izmantojot solījumus, šī cilpa ir jāmaina, lai skaitļi tiktu drukāti secīgi no 0 līdz 10. Tātad, ja nulles izdrukāšanai nepieciešamas 6 sekundes un vieninieka izdrukāšanai nepieciešamas 2 sekundes, vispirms jādrukā nulle un pēc tam sāksies atpakaļskaitīšana drukāšanai.

Un, protams, mēs neizmantojam Async/Await vai .sort, lai atrisinātu šo problēmu. Risinājuma piemērs ir beigās.

Asinhronās funkcijas

Asinhrono funkciju pievienošana ES2017 (ES8) vienkāršoja uzdevumu strādāt ar solījumiem. Es atzīmēju, ka asinhronās funkcijas darbojas “papildus” solījumiem. Šīs funkcijas neatspoguļo kvalitatīvi atšķirīgus jēdzienus. Asinhronās funkcijas ir paredzētas kā alternatīva kodam, kas izmanto solījumus.

Async/Await ļauj organizēt darbu ar asinhrono kodu sinhronā stilā.

Tādējādi, zinot solījumus, ir vieglāk saprast Async/Await principus.

sintakse

Parasti tas sastāv no diviem atslēgvārdiem: async un await. Pirmais vārds pārvērš funkciju par asinhronu. Šādas funkcijas ļauj izmantot gaidīšanu. Jebkurā citā gadījumā šīs funkcijas izmantošana radīs kļūdu.

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

Async tiek ievietots funkcijas deklarācijas pašā sākumā un bultiņas funkcijas gadījumā starp zīmi “=” un iekavām.

Šīs funkcijas var ievietot objektā kā metodes vai izmantot klases deklarācijā.

// 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! Ir vērts atcerēties, ka klases konstruktori un ieguvēji/iestatītāji nevar būt asinhroni.

Semantika un izpildes noteikumi

Asinhronās funkcijas būtībā ir līdzīgas standarta JS funkcijām, taču ir izņēmumi.

Tādējādi asinhronās funkcijas vienmēr atgriež solījumus:

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

Konkrēti, fn atgriež virkni hello. Tā kā šī ir asinhrona funkcija, virknes vērtība tiek iesaiņota solījumā, izmantojot konstruktoru.

Šeit ir alternatīvs dizains bez async:

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

Šajā gadījumā solījums tiek atgriezts “manuāli”. Asinhronā funkcija vienmēr ir ietīta ar jaunu solījumu.

Ja atgriešanas vērtība ir primitīva, asinhronā funkcija atgriež vērtību, iesaiņojot to solījumā. Ja atgriežamā vērtība ir solījuma objekts, tā izšķirtspēja tiek atgriezta jaunā solījumā.

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

Bet kas notiek, ja asinhronajā funkcijā ir kļūda?

async function foo() {
  throw Error('bar');
}
 
foo().catch(console.log);

Ja tas netiek apstrādāts, foo() atgriezīs solījumu ar noraidījumu. Šādā situācijā Promise.resolve vietā tiks atgriezts Promise.reject, kurā ir kļūda.

Asinhronās funkcijas vienmēr izvada solījumu neatkarīgi no tā, kas tiek atgriezts.

Asinhronās funkcijas tiek apturētas katrā gaidīšanas reizē.

Gaidīšana ietekmē izteiksmes. Tātad, ja izteiksme ir solījums, asinhronā funkcija tiek apturēta, līdz tiek izpildīts solījums. Ja izteiksme nav solījums, tā tiek pārveidota par solījumu, izmantojot Promise.resolve, un pēc tam pabeigta.

// 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);

Un šeit ir aprakstīts, kā darbojas fn funkcija.

• Pēc tā izsaukšanas pirmā rinda tiek pārveidota no const a = await 9; in const a = gaidiet Promise.resolve(9);.
• Pēc Await izmantošanas funkcijas izpilde tiek apturēta, līdz a iegūst savu vērtību (pašreizējā situācijā tā ir 9).
• delayAndGetRandom(1000) aptur fn funkcijas izpildi, līdz tā tiek pabeigta pati (pēc 1 sekundes). Tas efektīvi aptur fn funkciju uz 1 sekundi.
• delayAndGetRandom(1000), izmantojot risinājumu, atgriež nejaušu vērtību, kas pēc tam tiek piešķirta mainīgajam b.
• Gadījums ar mainīgo c ir līdzīgs gadījumam ar mainīgo a. Pēc tam viss uz sekundi apstājas, bet tagad delayAndGetRandom(1000) neko neatgriež, jo tas nav nepieciešams.
• Rezultātā vērtības tiek aprēķinātas, izmantojot formulu a + b * c. Rezultāts tiek iesaiņots solījumā, izmantojot Promise.resolve, un tiek atgriezts ar funkciju.

Šīs pauzes var atgādināt ES6 ģeneratorus, taču tajā ir kaut kas jūsu iemesli.

Problēmas risināšana

Nu, tagad apskatīsim iepriekš minētās problēmas risinājumu.

Funkcija finishMyTask izmanto Await, lai gaidītu tādu darbību rezultātus kā queryDatabase, sendEmail, logTaskInFile un citas. Ja salīdzināsiet šo risinājumu ar to, kurā tika izmantoti solījumi, līdzības kļūs acīmredzamas. Tomēr Async/Await versija ievērojami vienkāršo visas sintaktiskās sarežģītības. Šajā gadījumā nav daudz atzvanīšanas gadījumu un ķēžu, piemēram, .then/.catch.

Šeit ir risinājums ar skaitļu izvadi, ir divas iespējas.

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);
    });
  });
};

Un šeit ir risinājums, izmantojot asinhronās funkcijas.

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

Kļūda apstrādē

Neapstrādātas kļūdas ir iesaiņotas noraidītā solījumā. Tomēr asinhronās funkcijas var izmantot try/catch, lai sinhroni apstrādātu kļūdas.

async function canRejectOrReturn() {
  // wait one second
  await new Promise(res => setTimeout(res, 1000));
 
// Reject with ~50% probability
  if (Math.random() > 0.5) {
    throw new Error('Sorry, number too big.')
  }
 
return 'perfect number';
}

canRejectOrReturn() ir asinhrona funkcija, kas ir veiksmīga (“ideāls skaitlis”) vai neizdodas ar kļūdu (“Atvainojiet, skaitlis ir pārāk liels”).

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

Tā kā iepriekš minētajā piemērā ir paredzēts izpildīt canRejectOrReturn, tā paša kļūme izraisīs uztveršanas bloka izpildi. Rezultātā funkcija foo beigsies ar nedefinētu (kad nekas netiek atgriezts mēģinājuma blokā), vai arī ar kļūdu. Rezultātā šī funkcija neizdosies, jo try/catch apstrādās pašu funkciju foo.

Šeit ir vēl viens piemērs:

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

Ir vērts pievērst uzmanību faktam, ka piemērā canRejectOrReturn tiek atgriezts no foo. Foo šajā gadījumā vai nu beidzas ar perfektu skaitli, vai atgriež kļūdu (“Atvainojiet, skaitlis ir pārāk liels”). Noķeršanas bloks nekad netiks izpildīts.

Problēma ir tāda, ka foo atgriež solījumu, kas tika dots no canRejectOrReturn. Tātad risinājums foo kļūst par risinājumu canRejectOrReturn. Šajā gadījumā kods sastāvēs tikai no divām rindām:

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

Lūk, kas notiek, ja izmantojat gaidīšanas un atgriešanās vienumus:

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

Iepriekš minētajā kodā foo veiksmīgi izies gan ar perfektu numuru, gan pieķerot kļūdu. Šeit nebūs nekādu atteikumu. Bet foo atgriezīsies ar canRejectOrReturn, nevis ar undefined. Pārliecināsimies par to, noņemot rindu return await canRejectOrReturn():

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

Izplatītas kļūdas un kļūmes

Dažos gadījumos, izmantojot Async/Await, var rasties kļūdas.

Aizmirsts gaida

Tas notiek diezgan bieži - gaidīšanas atslēgvārds tiek aizmirsts pirms solījuma:

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

Kā redzat, kodā nav gaidīšanas vai atgriešanas. Tāpēc foo vienmēr iziet ar undefined bez 1 sekundes aizkaves. Bet solījums tiks izpildīts. Ja tas rada kļūdu vai noraidīšanu, tiks izsaukts UnhandledPromiseRejectionWarning.

Asinhronās funkcijas atzvanījumos

Asinhronās funkcijas diezgan bieži tiek izmantotas .map vai .filter kā atzvanīšanas iespējas. Piemērs ir funkcija fetchPublicReposCount(lietotājvārds), kas atgriež GitHub atvērto repozitoriju skaitu. Pieņemsim, ka ir trīs lietotāji, kuru rādītāji mums ir nepieciešami. Šeit ir šī uzdevuma kods:

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'];
}

Mums vajag ArfatSalman, octocat, norvig kontus. Šajā gadījumā mēs rīkojamies:

const users = [
  'ArfatSalman',
  'octocat',
  'norvig'
];
 
const counts = users.map(async username => {
  const count = await fetchPublicReposCount(username);
  return count;
});

Ir vērts pievērst uzmanību Await .map atzvanīšanai. Šeit skaits ir solījumu klāsts, un .map ir anonīma atzvanīšana katram norādītajam lietotājam.

Pārāk konsekventa gaidīšanas izmantošana

Ņemsim šo kodu kā piemēru:

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;
}

Šeit repo numurs tiek ievietots skaitīšanas mainīgajā, pēc tam šis skaitlis tiek pievienots skaitīšanas masīvam. Problēma ar kodu ir tāda, ka līdz brīdim, kad no servera pienāk pirmā lietotāja dati, visi nākamie lietotāji būs gaidīšanas režīmā. Tādējādi vienlaikus tiek apstrādāts tikai viens lietotājs.

Ja, piemēram, viena lietotāja apstrāde aizņem apmēram 300 ms, tad visiem lietotājiem tā ir jau sekunde, patērētais laiks lineāri ir atkarīgs no lietotāju skaita. Bet, tā kā repo skaita iegūšana nav viena no otras atkarīga, procesus var paralēli. Tam nepieciešams strādāt ar .map un Promise.all:

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

Promise.all kā ievadi saņem daudzus solījumus un atgriež solījumu. Pēdējais tiek izpildīts pēc tam, kad visi masīvā solījumi ir izpildīti vai pēc pirmā noraidīšanas. Var gadīties, ka tie visi nestartējas vienlaicīgi – lai nodrošinātu vienlaicīgu startu, var izmantot p-map.

Secinājums

Asinhronās funkcijas kļūst arvien svarīgākas attīstībai. Lai adaptīvi izmantotu asinhronās funkcijas, jums vajadzētu izmantot Asinhronie iteratori. JavaScript izstrādātājam tas ir labi jāpārzina.

Skillbox iesaka:

• Praktiskais kurss "Mobile Developer PRO".
• Lietišķais tiešsaistes kurss "Python datu analītiķis".
• Divu gadu praktiskais kurss "Es esmu PRO tīmekļa izstrādātājs".

Avots: www.habr.com