Utforsking av Async/Await i JavaScript gjennom eksempler

Artikkelforfatteren utforsker Async/Await i JavaScript gjennom eksempler. Generelt er Async/Await en praktisk måte å skrive asynkron kode på. Før denne muligheten ble slik kode skrevet med bruk av tilbakeringinger og løfter. Forfatteren av den originale artikkelen fremhever fordelene ved Async/Await ved å analysere forskjellige eksempler.

Vi minner om: for alle lesere av «Habr» — 10 000 rubler rabatt ved påmelding til hvilket som helst Skillbox-kurs med kampanjekoden «Habr».

Skillbox anbefaler: Nettbasert utdanningskurs «Java-utvikler».

Tilbakeringing

En tilbakeringing er en funksjon som kalles på et udefinert tidspunkt. Tidligere ble tilbakeringinger brukt i de delene av koden der resultatet ikke kunne oppnås umiddelbart.

Her er et eksempel på asynkron fillesing i Node.js:

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

Problemer oppstår når flere asynkrone operasjoner må utføres samtidig. La oss forestille oss et scenario der en forespørsel gjøres til databasen for brukeren Arfat, og vi må hente hans felt profile_img_url og laste opp bildet fra serveren som omhandler someserver.com.
Etter opplastingen konverterer vi bildet til et annet format, for eksempel fra PNG til JPEG. Hvis konverteringen er vellykket, sendes det en e-post til brukeren. Videre blir informasjon om hendelsen registrert i filen transformations.log med datoen angitt.

Det er viktig å merke seg at bruken av tilbakeringinger og det store antallet }) i den siste delen av koden kan føre til det vi kaller Callback Hell eller Pyramid of Doom.

Ulempene ved denne metoden er åpenbare:

• Denne koden er vanskelig å lese.
• Det er også vanskelig å håndtere feil, noe som ofte fører til at kvaliteten på koden reduseres.

For å løse dette problemet ble løfter introdusert i JavaScript. De gjør det mulig å erstatte dypridning av tilbakeringinger med .then.

En positiv ting med løfter er at koden blir mye mer lesbar, og at man kan lese den ovenfra og ned, heller enn fra venstre til høyre. Likevel har løfter også sine egne problemer:

• Det må legges til mange .then.
• I stedet for try/catch brukes .catch for å håndtere alle feil.
• Å jobbe med flere løfter innen en enkelt syklus er langt fra alltid praktisk, i noen tilfeller kompliserer de koden.

Her er en oppgave som vil illustrere betydningen av det siste punktet.

La oss anta at det finnes en for-løkke som skriver ut en sekvens av tall fra 0 til 10 med tilfeldige intervaller (0–n sekunder). Ved å bruke løfter må vi endre denne løkken slik at tallene skrives ut i rekkefølge fra 0 til 10. Så hvis utskrift av null tar 6 sekunder og av en tar 2 sekunder, må null skrives ut først, før utskriften av en begynner.

Og selvfølgelig bruker vi ikke Async/Await eller .sort for å løse dette problemet. Eksempelet på løsningen finner du på slutten.

Async-funksjoner

Innføringen av async-funksjoner i ES2017 (ES8) har gjort det enklere å arbeide med løfter. Jeg vil merke at async-funksjoner fungerer "over" løfter. Disse funksjonene representerer ikke kvalitativt forskjellige konsepter. Async-funksjoner ble tenkt som et alternativ til kode som bruker løfter.

Async/Await gir mulighet til å organisere arbeidet med asynkron kode i synkron stil.

Dermed gjør kunnskap om løfter det lettere å forstå prinsippene bak Async/Await.

Syntaks

I normale situasjoner består det av to spesifikke ord: async og await. Det første ordet gjør funksjonen asynkron. I slike funksjoner er bruken av await tillatt. I alle andre tilfeller vil bruk av dette ordet føre til en feil.

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

Async settes inn i begynnelsen av funksjonsdeklarasjonen, og i tilfelle et pilfunksjonsbruk—mellom likhetstegnet «=» og parentesene.

Disse funksjonene kan plasseres i et objekt som metoder eller brukes i klasseerklæringen.

// 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! Det er viktig å huske at klassekonstruktører og gettere/settere ikke kan være asynkrone.

Semantikk og utførelsesregler

Async-funksjoner ligner i prinsippet på standard JS-funksjoner, men det finnes unntak.

Så, async-funksjoner returnerer alltid løfter:

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

Specielt returnerer fn strengen hei. Siden dette er en asynkron funksjon, pakkes verdien av strengen inn i et løfte ved hjelp av konstruktøren.

Her er en alternativ konstruksjon uten Async:

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

I dette tilfellet skjer retur av løftet "manuelt". En asynkron funksjon pakkes alltid inn i et nytt løfte.

Når returverdien er en primitiv, returnerer async-funksjonen verdien innpakket i et løfte. Når returverdien faktisk er et løfteobjekt, returneres oppløsningen i et nytt løfte.

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

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

Men hva skjer dersom det oppstår en feil inne i den asynkrone funksjonen?

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

foo().catch(console.log);

Dersom den ikke håndteres, vil foo() returnere et løfte med avvisning. I denne situasjonen vil Promise.reject bli returnert i stedet for Promise.resolve, og inneholde feilen.

Asynkrone funksjoner gir alltid et løfte ut, uansett hva som returneres.

Asynkrone funksjoner pauser ved hvert await.

Await påvirker uttrykk. Så, hvis uttrykket er et løfte, vil async-funksjonen pauses til løftet er fullført. Dersom uttrykket ikke er et løfte, konverteres det til et løfte gjennom Promise.resolve, og fullføres deretter.

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

Her er en beskrivelse av hvordan fn-funksjonen fungerer.

• Etter at den er kalt, konverteres den første linjen fra const a = await 9; til const a = await Promise.resolve(9);.
• Etter å ha brukt Await pauses utførelsen av funksjonen til a får sin verdi (i dette tilfellet 9).
• delayAndGetRandom(1000) pauser utførelsen av fn-funksjonen til det er fullført (etter 1 sekund). Dette er faktisk en stopp av fn-funksjonen i 1 sekund.
• delayAndGetRandom(1000) returnerer et tilfeldig verdi gjennom resolve, som deretter tildeles variabelen b.
• Situasjonen med variabel c er lik tilfelle med variabel a. Deretter stopper alt i ett sekund, men nå returnerer ikke delayAndGetRandom(1000) noe, da det ikke er nødvendig.
• Til slutt beregnes verdiene etter formelen a + b * c. Resultatet pakkes inn i et løfte ved hjelp av Promise.resolve og returneres fra funksjonen.

Disse pausene kan minne om generatorer i ES6, men det finnes sine grunner.

Løser oppgaven

La oss nå se på løsningen på oppgaven som ble nevnt tidligere.

I funksjonen finishMyTask bruker vi Await for å vente på resultater fra operasjoner som queryDatabase, sendEmail, logTaskInFile og flere andre. Når vi sammenligner denne tilnærmingen med den som brukte løfter, blir likheten åpenbar. Likevel forenkler Async/Await-versjonen betydelig syntaksen. I dette tilfellet er det ikke mange tilbakeringinger og kjeder som .then/.catch.

Her er en løsning med tallutskrift, som har to alternativer.

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

Her er en løsning som bruker async-funksjoner.

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

Feilhåndtering

Ubehandlede feil pakkes inn i et avvist løfte. Likevel kan vi i async-funksjoner bruke try/catch-strukturen for å håndtere feil synkront.

async function canRejectOrReturn() {
  // vent ett sekund
  await new Promise(res => setTimeout(res, 1000));
 
  // Avvis med ~50% sannsynlighet
  if (Math.random() > 0.5) {
    throw new Error('Beklager, tallet er for stort.')
  }
 
  return 'perfekt tall';
}

canRejectOrReturn() er en asynkron funksjon som enten fullfører vellykket (“perfekt tall”), eller mislykkes med en feil (“Beklager, tallet er for stort”).

async function foo() {
  try {
    await canRejectOrReturn();
  } catch (e) {
    return 'feil fanget';
  }
}

Siden det i eksemplet ovenfor ventes at canRejectOrReturn utføres, vil en egen mislykket avslutning føre til at catch-blokken utføres. Dermed vil foo-funksjonen avsluttes med enten undefined (når ingenting returneres i try-blokken), eller med feil fanget. Resultatet er at denne funksjonen ikke vil mislykkes, siden try/catch tar seg av feilene fra foo-funksjonen selv.

Her er et annet eksempel:

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

Det er viktig å merke seg at i eksempelet fra foo returneres canRejectOrReturn. Foo vil i dette tilfellet avsluttes med enten perfekt tall eller en feil (Error) (“Beklager, tallet er for stort”). Catch-blokken vil aldri bli utført.

Problemet er at foo returnerer et løfte, som videreformidles fra canRejectOrReturn. Så løsningen i foo blir løsningen for canRejectOrReturn. I dette tilfellet vil koden bestå av bare to linjer:

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

Her er hva som skjer hvis vi bruker både await og return sammen:

async function foo() {
  try {
    return await canRejectOrReturn();
  } catch (e) {
    return 'feil fanget';
  }
}

I koden ovenfor vil foo avsluttes vellykket med både perfekt tall og feil fanget. Her vil det ikke være noen avvisninger. Men foo vil avsluttes med canRejectOrReturn, og ikke med undefined. La oss sjekke dette ved å fjerne linjen return await canRejectOrReturn():

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

Vanlige feil og fallgruver

I noen tilfeller kan bruk av Async/Await føre til feil.

Glemt await

Dette skjer ganske ofte — man glemmer nøkkelordet await før en promise:

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

I koden er det, som man kan se, verken await eller return. Dermed avsluttes foo alltid med undefined uten en forsinkelse på 1 sekund. Men promisen vil bli utført. Hvis den gir en feil eller blir avvist, vil UnhandledPromiseRejectionWarning bli kalt.

Async-funksjoner i tilbakeringinger

Async-funksjoner brukes ganske ofte i .map eller .filter som tilbakeringinger. Et eksempel kan være funksjonen fetchPublicReposCount(username), som returnerer antallet åpne GitHub-repositorier. La oss si at vi har tre brukere hvis statistikk vi trenger. Her er koden for denne oppgaven:

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

Vi trenger kontoene ArfatSalman, octocat, norvig. I så fall kjører vi:

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

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

Det er verdt å merke seg await i tilbakeringingsfunksjonen .map. Her er counts en array av promises, og .map er en anonym tilbakeringing for hver angitt bruker.

Overdreven sekvensiell bruk av await

La oss ta en slik kode som eksempel:

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

Her plasseres antallet repoer i variabelen count, deretter legges dette tallet til i arrayen counts. Problemet med koden er at mens dataene fra serveren for den første brukeren kommer, vil alle følgende brukere være i ventemodus. Dermed kan bare én bruker behandles om gangen.

Hvis behandling av én bruker tar omtrent 300 ms, vil det for alle brukere være én sekund; den totale tiden avhenger lineært av antall brukere. Men siden innhentingen av antall repoer ikke avhenger av hverandre, kan prosessene parallelliseres. For dette trenger vi å jobbe med .map og 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 tar inn en matrise av løfter som returnerer et løfte. Det fullføres enten når alle løfter i matrisen er fullført eller ved første avvisning. Det kan skje at de ikke startes samtidig, — for å sikre samtidig start kan man bruke p-map.

Konklusjon

Async-funksjoner blir stadig viktigere for utvikling. For tilpasset bruk av async-funksjoner kan det være lurt å bruke Async Iterators. En JavaScript-utvikler må forstå dette godt.

Skillbox anbefaler:

• Praktisk kursus «Mobiludvikler PRO».
• Praktisk nettbasert kurs «Dataanalytiker med Python».
• Toårig praktisk kurs «Jeg er PRO Web-utvikler».

Kilde: habr.com