Asynkron JavaScript

Problemet: noget tager tid#

Din kode kører normalt én linje ad gangen, oppefra og ned. Men at hente data fra en server tager måske et halvt sekund. Hvis programmet stod stille imens, ville hele siden fryse.

Løsningen er, at JavaScript sætter den langsomme opgave i gang, går videre med resten af koden, og først vender tilbage til opgaven, når svaret er der.

console.log("1: før");

setTimeout(() => {
console.log("2: inde i ventetiden");
}, 500);

console.log("3: efter");

Tryk på “Kør koden”.

Rækkefølgen bliver 1, 3, 2. Det er ikke en fejl. Det er hele pointen. Og det er også forklaringen på den fejl, alle laver første gang de henter data: linjen efter kaldet kører, før svaret er kommet.

Et promise er en kvittering#

Når du starter noget, der tager tid, får du ikke resultatet. Du får et promise: en kvittering, der på et tidspunkt enten bliver indfriet med en værdi eller fejler.

const loefte = new Promise((indfri) => {
setTimeout(() => indfri("Her er svaret"), 300);
});

console.log(loefte);

loefte.then((svar) => console.log(svar));

Tryk på “Kør koden”.

Skriver du kvitteringen ud med det samme, står der Promise { <pending> }. Den venter stadig. .then() siger: “når den er indfriet, så gør det her”.

async og await gør det læsbart#

.then() bliver hurtigt uoverskueligt, når flere ting skal ske efter hinanden. await gør det samme, men skrevet som almindelige linjer nedad.

function vent(ms, vaerdi) {
return new Promise((indfri) => setTimeout(() => indfri(vaerdi), ms));
}

async function hentAlt() {
console.log("starter");
const a = await vent(200, "første");
console.log(a);
const b = await vent(200, "andet");
console.log(b);
return "færdig";
}

hentAlt().then((slut) => console.log(slut));

Tryk på “Kør koden”.

To regler, og de hænger sammen:

1. await må kun stå inde i en funktion, der er markeret async.
2. En async-funktion returnerer altid et promise, også når du returnerer en almindelig værdi.

Fejl fanges med try og catch#

Går det galt undervejs, serveren svarer ikke, netværket er væk, kastes en fejl. Den fanger du med try/catch, ellers stopper din funktion uden at sige hvorfor.

function fejler() {
return new Promise((indfri, afvis) => {
  setTimeout(() => afvis(new Error("Serveren svarer ikke")), 200);
});
}

async function proev() {
try {
  const svar = await fejler();
  console.log(svar);
} catch (fejl) {
  console.log("Fanget: " + fejl.message);
}
}

proev();

Tryk på “Kør koden”.

Det mønster, async, await, try/catch, er præcis det, du skriver hver gang du henter data med fetch.

Kort opsamling#

• Langsomme opgaver blokerer ikke; koden går videre imens.
• Et promise er kvitteringen på noget, der endnu ikke er færdigt.
• await venter på kvitteringen, og kræver async på funktionen.
• Pak altid await ind i try/catch, når noget kan gå galt.