En djupdykning i Async/Await i JavaScript genom exempel

Artikelns författare går igenom exempel på Async/Await i JavaScript. Generellt sett är Async/Await ett bekvämt sätt att skriva asynkron kod. Innan denna funktionalitet fanns skrivs sådan kod med hjälp av callbacks och promiser. Författaren av den ursprungliga artikeln belyser fördelarna med Async/Await genom att gå igenom olika exempel.

Påminnelse: för alla läsare av "Habr" — 10 000 rubel rabatt vid registrering för vilken kurs som helst på Skillbox med rabattkoden "Habr".

Skillbox rekommenderar: Utbildningskurs online Java-utvecklare.

Callback

En callback är en funktion vars anrop skjuts upp på obestämd tid. Tidigare användes callbacks i de delar av koden där resultatet inte kunde erhållas omedelbart.

Här är ett exempel på asynkront filläsande i Node.js:

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

Problem uppstår när flera asynkrona operationer måste utföras samtidigt. Låt oss föreställa oss följande scenario: en databasfråga görs för användaren Arfat, där vi behöver läsa hans fält profile_img_url och ladda ner bilden från servern som ligger på someserver.com.
Efter nedladdningen konverterar vi bilden till ett annat format, till exempel från PNG till JPEG. Om konverteringen lyckas skickas ett e-postmeddelande till användaren. Informationen om händelsen registreras sedan i transformations.log-filen med datum.

Det är värt att notera hur callbacks är inbäddade och hur många }) som finns i slutet av koden. Det kallas Callback Hell eller Pyramid of Doom.

Nackdelarna med detta tillvägagångssätt är uppenbara:

• Koden är svår att läsa.
• Det är också svårt att hantera fel, vilket ofta leder till en försämring av kodkvaliteten.

För att lösa detta problem har promiser lagts till i JavaScript. De gör det möjligt att ersätta djup inbäddning av callbacks med .then.

En positiv aspekt av promiser är att koden blivit mycket lättare att läsa, från toppen och ner snarare än från vänster till höger. Trots det har promiser också sina egna problem:

• Det krävs en stor mängd .then.
• Istället för try/catch används .catch för att hantera alla fel.
• Att arbeta med flera promiser inom samma cykel är långt ifrån alltid bekvämt; i vissa fall komplicerar de koden.

Här är en uppgift som visar värdet av den senaste punkten.

Anta att det finns en for-loop som skriver ut en sekvens av siffror från 0 till 10 med en slumpmässig paus (0–n sekunder). Genom att använda löften behöver vi ändra denna loop så att siffrorna skrivs ut i sekvens från 0 till 10. Om det tar 6 sekunder att skriva ut noll och 2 sekunder att skriva ut ett, så bör noll skrivas ut först och sedan ska nedräkningen av ett börja.

Och självklart använder vi inte Async/Await eller .sort för att lösa denna uppgift. Exempel på lösning kommer i slutet.

Async-funktioner

Tillägget av async-funktioner i ES2017 (ES8) har underlättat arbetet med löften. Jag vill understryka att async-funktioner fungerar "ovanpå" löften. Dessa funktioner representerar inte en kvalitativt annan koncept. Async-funktioner var tänkt som ett alternativ till kod som använder löften.

Async/Await ger möjlighet att organisera arbete med asynkron kod i en synkron stil.

Därmed underlättar kunskap om löften förståelsen av principerna för Async/Await.

Syntax

I vanliga fall består den av två nyckelord: async och await. Det första ordet gör funktionen asynkron. I sådana funktioner tillåts användning av await. I alla andra fall kommer användning av denna funktion att orsaka ett fel.

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

Async placeras i början av funktionsdeklarationen, och i fallet med en arrow-funktion placeras den mellan "=" och parenteserna.

Dessa funktioner kan placeras i ett objekt som metoder eller användas i en klassdeklaration.

// 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 är viktigt att komma ihåg att klasskonstruktorer och getters/setters inte kan vara asynkrona.

Semantik och körningsregler

Async-funktioner liknar i princip standard JS-funktioner, men det finns undantag.

Således returnerar async-funktioner alltid löften:

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

Specifikt returnerar fn strängen hello. Eftersom detta är en asynkron funktion, så sveps värdet av strängen in i ett löfte med hjälp av konstruktorn.

Här är en alternativ konstruktion utan Async:

function fn() {
  return Promise.resolve('hello');
}

fn().then(console.log);
// hello

I detta fall utförs återkomsten av löftet "manuellt". En asynkron funktion sveps alltid in i ett nytt löfte.

Om det returnerade värdet är en primitiv, kommer async-funktionen att returnera värdet inbäddat i ett löfte. Om det returnerade värdet redan är ett löfte, så returneras dess förverkligande i ett nytt löfte.

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

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

Men vad händer om det inträffar ett fel inuti den asynkrona funktionen?

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

foo().catch(console.log);

Om det inte hanteras, kommer foo() att returnera ett löfte med avvisande. I sådana fall kommer istället Promise.resolve att returnera Promise.reject som innehåller felet.

Async-funktioner ger alltid ett löfte ut, oavsett vad som returneras.

Asynkrona funktioner pausar vid varje await.

Await påverkar uttryck. Om uttrycket är ett löfte, pausar async-funktionen tills löftet fullgörs. Om uttrycket inte är ett löfte, konverteras det till ett löfte via Promise.resolve och fullföljs sedan.

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

Här är en beskrivning av hur fn-funktionen fungerar.

• Efter att den har anropats omvandlas den första raden från const a = await 9; till const a = await Promise.resolve(9);.
• Efter att Await används, pausar funktionen medan a får sitt värde (i detta fall 9).
• delayAndGetRandom(1000) pausar exekveringen av fn-funktionen tills den är klar (efter 1 sekund). Detta är i praktiken en paus av fn-funktionen i 1 sekund.
• delayAndGetRandom(1000) returnerar ett slumptal genom resolve, vilket sedan tilldelas variabeln b.
• Och fallet med variabeln c är liknande fallet med variabeln a. Efter det stannar allt i en sekund, men nu returnerar delayAndGetRandom(1000) ingenting eftersom det inte behövs.
• Slutligen beräknas värdena enligt formeln a + b * c. Resultatet omsluts sedan i ett löfte med hjälp av Promise.resolve och returneras av funktionen.

Dessa pauser kan likna generatorer i ES6, men det finns egna skäl.

Att lösa problemet

Låt oss nu titta på lösningen till problemet som nämndes ovan.

I funktionen finishMyTask används Await för att vänta på resultat av operationer som queryDatabase, sendEmail, logTaskInFile och andra. Om man jämför denna lösning med den där löften användes, blir likheterna uppenbara. Trots detta förenklar versionen med Async/Await betydligt alla syntaktiska komplexiteter. Det finns få callbacks och kedjor som .then/.catch.

Här är en lösning med utskrift av siffror, det finns två alternativ.

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

Här är en lösning som använder async-funktioner.

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

Felhantering

Ohanterade fel omsluts av ett rejected löfte. Trots detta kan man i async-funktioner använda try/catch för att göra en synkron felhantering.

async function canRejectOrReturn() {
  // vänta en sekund
  await new Promise(res => setTimeout(res, 1000));

  // Avvisa med ~50% sannolikhet
  if (Math.random() > 0.5) {
    throw new Error('Förlåt, numret är för stort.')
  }

  return 'perfekt nummer';
}

canRejectOrReturn() är en asynkron funktion som antingen lyckas utföra sig (‘perfekt nummer’) eller misslyckas med ett fel (‘Förlåt, numret är för stort’).

async function foo() {
  try {
    await canRejectOrReturn();
  } catch (e) {
    return 'fel fångat';
  }
}

Eftersom canRejectOrReturn förväntas utföras ovan, kommer eget misslyckande att leda till att catch-blocket körs. Funktionen foo avslutas antingen med undefined (när inget returneras i try-blocket), eller med fel fångat. Således kommer denna funktion inte att få ett misslyckande, eftersom try/catch tar hand om funktionen foo.

Här är ett annat exempel:

async function foo() {
  try {
    return canRejectOrReturn();
  } catch (e) {
    return 'fel fångat';
  }
}

Det är värt att notera att canRejectOrReturn returneras från foo-exemplet. Foo avslutas antingen med perfekt nummer eller returnerar ett fel Error (‘Förlåt, numret är för stort’). Catch-blocket kommer aldrig att köras.

Problemet är att foo returnerar ett löfte från canRejectOrReturn. Därför blir lösningen för funktionen foo en lösning för canRejectOrReturn. Koden i detta fall består av endast två rader:

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

Och så här blir det om man använder await och return tillsammans:

async function foo() {
  try {
    return await canRejectOrReturn();
  } catch (e) {
    return 'fel fångat';
  }
}

I koden ovan kommer foo att avslutas både med perfekt nummer och fel fångat. Här blir det inga misslyckanden. Men foo kommer att avslutas med canRejectOrReturn och inte med undefined. Låt oss kontrollera detta genom att ta bort raden return await canRejectOrReturn():

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

Vanliga misstag och fällor

I vissa fall kan användning av Async/Await leda till fel.

Glömt await

Detta händer ganska ofta — nyckelordet await glöms bort före ett löfte:

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

I koden finns varken await eller return. Därför avslutas foo alltid med undefined utan någon fördröjning på 1 sekund. Men löftet kommer att exekveras. Om det ger ett fel eller avvisas, kommer UnhandledPromiseRejectionWarning att utlösas.

Async-funktioner i återanrop

Async-funktioner används ofta i .map eller .filter som återanrop. Ett exempel är funktionen fetchPublicReposCount(username), som returnerar antalet offentliga repos på GitHub. Anta att vi har tre användare vars statistik vi behöver. Här är koden för denna uppgift:

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 behöver konton för ArfatSalman, octocat, norvig. I det här fallet gör vi:

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

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

Det är värt att notera await i återanropet .map. Här är counts en array av löften, och .map är en anonym återanrop för varje angiven användare.

Överdriven sekventiell användning av await

Som exempel tar vi följande kod:

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

Här placeras antalet repos i variabeln count, och detta tal läggs till i arrayen counts. Problemet med koden är att så länge som data från den första användaren inte har kommit, kommer alla efterföljande användare att vänta. Således hanteras endast en användare åt gången.

Om det till exempel tar cirka 300 ms att behandla en användare, så blir det för alla användare redan en sekund; den totala tiden beror linjärt på antalet användare. Men eftersom antalet repos inte beror på varandra kan processerna parallelliseras. För detta behövs arbete med .map och Promise.all:

asynkron funktion fetchAllCounts(användare) {
  const löften = användare.map(async användarnamn => {
    const antal = await fetchPublicReposCount(användarnamn);
    return antal;
  });
  return Promise.all(löften);
}

Promise.all tar emot en array av löften som returnerar ett löfte. Den avslutas först efter att alla löften i arrayen har slutförts eller vid första avvisningen. Det kan hända att inte alla startar samtidigt — för att säkerställa samtidig körning kan man använda p-map.

Slutsats

Asynkrona funktioner blir allt viktigare för utveckling. För adaptiv användning av asynkrona funktioner bör man överväga Asynkrona iteratörer. En JavaScript-utvecklare bör ha god kunskap om detta.

Skillbox rekommenderar:

• Praktisk kurs «Mobilutvecklare PRO».
• Tillämplig onlinekurs Dataanalytiker på Python.
• Tvåårig praktisk kurs «Jag är PRO Webbutvecklare».

Källa: habr.com