Netwerkverzoeken, het lezen van bestanden en timers eindigen allemaal later, maar JavaScript kan niet zomaar stoppen en wachten, anders loopt de pagina vast. JavaScript-beloften geven je een nette manier om te zeggen: “Als dit klaar is, doe dat dan, en als het mislukt, doe dan dit.”

Zelfs als je voornamelijk async en await schrijft, gebruik je de onderliggende beloften, dus als je ze begrijpt, wordt het debuggen veel eenvoudiger. We hebben deze voorbeelden uitgevoerd op Node.js 24 en de weergegeven uitvoer is afkomstig van die run. Ze gedragen zich op dezelfde manier in moderne browsers.

Wat is een belofte?

Een belofte is een tijdelijke aanduiding voor een toekomstige waarde. Denk aan de zoemer die een restaurant je geeft als je bestelt. Je hebt je eten nog niet, maar je hebt iets vast dat je vertelt wanneer het klaar is, of dat er een probleem is, en ondertussen ben je vrij om andere dingen te doen.

In code retourneert een asynchrone functie onmiddellijk een belofte en voegt u toe wat er vervolgens moet gebeuren:

fetch("/api/user")
  .then((response) => response.json())
  .then((user) => console.log(user.name))
  .catch((error) => console.log("Failed:", error.message));

De drie beloftestaten

Een belofte die wordt nagekomen of afgewezen, wordt settled genoemd. Een belofte kan maar één keer vervuld worden. Daarna worden de status en waarde ervan vastgesteld en worden latere oproepen naar resolve of reject genegeerd.

Creëer een belofte

Normaal gesproken consumeer je beloften van API’s zoals fetch, maar als je er een maakt, zie je hoe ze werken. De constructor ontvangt twee functies, resolve en reject:

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "Asha" });
      } else {
        reject(new Error("Invalid id"));
      }
    }, 100);
  });
}

console.log(fetchUser(1));

// Promise { <pending> }

Als u de belofte meteen registreert, ziet u dat deze nog steeds in behandeling is, omdat de timer niet is geactiveerd. De waarde kan alleen worden bereikt via een handler of await. Weiger altijd met een Error object in plaats van met een string, aangezien een Error een stacktrace bevat die helpt bij het opsporen van fouten.

dan, vangen en tenslotte

Deze drie methoden koppelen handlers aan een belofte:

fetchUser(1).then((user) => console.log(user.name));
// Asha

fetchUser(-1)
  .then((user) => console.log("never runs", user))
  .catch((error) => console.log("caught:", error.message))
  .finally(() => console.log("finally"));

// caught: Invalid id
// finally

then draait op succes, catch draait op mislukking en finally draait in beide richtingen. Dat maakt finally de juiste plek voor opruimwerk, zoals het verbergen van een laadspinner. Het krijgt geen argumenten, omdat het zich niets zou moeten aantrekken van de uitkomst.

Beloftes aan elkaar rijgen

Het belangrijkste idee is dat then altijd een nieuwe belofte teruggeeft. Wat uw begeleider ook retourneert, wordt de waarde van die nieuwe belofte:

Promise.resolve(2)
  .then((n) => n * 10)
  .then((n) => n + 1)
  .then((n) => console.log("chain:", n));

// chain: 21

Als een afhandelaar een andere belofte teruggeeft, wacht de keten tot deze is afgehandeld voordat hij verder gaat. Dit is wat geneste callbacks omzet in een vlakke reeks stappen:

getUser(id)
  .then((user) => getOrders(user.id))
  .then((orders) => getInvoice(orders[0].id))
  .then((invoice) => console.log(invoice.total))
  .catch(handleError);

Hoe fouten zich door een keten verplaatsen

Een afgewezen belofte slaat elke then over totdat hij een catch bereikt. Het naar binnen gooien van een geleider geldt ook als een afwijzing. En een catch die normaal terugkeert, brengt de keten weer op het goede spoor:

Promise.resolve("start")
  .then(() => {
    throw new Error("step 2 failed");
  })
  .then(() => console.log("skipped"))
  .catch((error) => {
    console.log("caught:", error.message);
    return "recovered";
  })
  .then((value) => console.log("continues:", value));

// caught: step 2 failed
// continues: recovered

Beschouw dit als de asynchrone versie van try en catch. Eén catch aan het eind bestrijkt meestal de hele keten. Als je alleen een fout wilt registreren en nog steeds niet slaagt, gooi deze dan opnieuw vanuit de catch.

Promise.all, allSettled, ras en wat dan ook

Deze statische methoden coördineren meerdere beloften tegelijk. Ze nemen allemaal een array en geven één belofte terug.

Om ze te testen hebben we twee kleine helpers gebruikt, één die na vertraging slaagt en één die na vertraging faalt:

const wait = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));
const fail = (ms, message) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms));

Promise.all

await Promise.all([wait(300, "a"), wait(100, "b"), wait(200, "c")]);

// [ 'a', 'b', 'c' ]   took about 300 ms

Twee details om op te merken. De resultaten behouden de invoervolgorde, ook al eindigde b als eerste. En de totale tijd was ongeveer 300 ms, de tijd van de langzaamste taak en niet de som van 600 ms, omdat ze alle drie al tegelijk liepen. Als een van hen afwijst, wijst de hele zaak meteen af:

await Promise.all([wait(100, "a"), fail(50, "b failed")]);

// rejected: b failed

Promise.allSettled

Deze wacht op alles en rapporteert elk resultaat, zodat één fout de rest niet verliest. Het past bij een dashboard waarbij elke widget onafhankelijk wordt geladen:

const results = await Promise.allSettled([wait(50, "a"), fail(50, "b failed")]);
results.map((r) => r.status);

// [ 'fulfilled', 'rejected' ]

Promise.race en Promise.any

await Promise.race([wait(300, "slow"), wait(100, "fast")]);   // fast
await Promise.any([fail(50, "x"), wait(100, "ok")]);          // ok

Het verschil is dat race de eerste is die tot een oplossing komt, zelfs als het mislukt, terwijl any mislukkingen negeert zolang iets slaagt. Een klassiek gebruik van race is het toevoegen van een time-out aan een langzaam verzoek, hoewel de langzamere taak op de achtergrond blijft draaien, tenzij je deze annuleert.

Beloften en async/wachten

async en await zijn een beter leesbare manier om met dezelfde beloften te werken. Een functie async retourneert altijd een belofte, en await pauzeert die functie totdat een belofte wordt vervuld:

async function showInvoice(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user.id);
    console.log(orders.length);
  } catch (error) {
    console.log("Failed:", error.message);
  }
}

Afwijzingen worden foutieve fouten, dus gewone try en catch werken. Voor parallel werk heb je nog steeds Promise.all nodig, want bij het wachten op de ene oproep na de andere worden ze op volgorde uitgevoerd. Onze JavaScript async/await-handleiding gaat hier dieper op in.

Beloften en de evenementenlus

Beloftebehandelaars worden nooit onmiddellijk gebeld, zelfs niet als de belofte al is voldaan. Ze worden uitgevoerd nadat de huidige code is voltooid en vóór eventuele timers. Hier is het bewijs:

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("sync");

// sync
// microtask
// timeout

Synchrone code wordt eerst uitgevoerd. Vervolgens komt de microtask-wachtrij, die belofte-handlers bevat. Pas dan pikt de gebeurtenislus de volgende taak op, zoals een timer. Dit is een populaire interviewvraag en het verklaart waarom een ​​setTimeout van nul niet echt onmiddellijk is.

Beloften versus terugbellen

Veel voorkomende fouten

• Vergeten naar binnen terug te keren then. Zonder een return ontvangt de volgende stap undefined en wacht niet op je innerlijke belofte.
• Helemaal niet catch. Dit veroorzaakt een onverwerkte afwijzing en in Node.js stopt dit het proces standaard.
• Nesten in plaats van ketenen. Door then in then te plaatsen, wordt de callback-hel opnieuw gecreëerd. Geef de belofte terug en zet de keten voort.
• Een belofte inpakken in new Promise. Als een functie al een belofte retourneert, gebruik deze dan gewoon.
• Gebruik forEach met asynchrone callbacks. Er wordt niet gewacht. Gebruik for...of of Promise.all met map, zoals weergegeven in onze handleiding voor JavaScript-arraymethoden.
• Denk dat een belofte kan worden ingetrokken. Dat kan niet op zichzelf. Gebruik voor verzoeken AbortController.

Tot slot

Beloftes komen neer op een paar regels: een belofte wordt één keer vervuld, then geeft een nieuwe belofte terug, en fouten reizen door de keten totdat iets hen opvalt. Zodra deze regels natuurlijk aanvoelen, zijn async en await niet meer magisch. Om te oefenen herschrijft u één op callback gebaseerde functie met behulp van beloften, haalt u vervolgens twee eindpunten op met Promise.all en handelt u een fout op de juiste manier af.

Veelgestelde vragen

Blijf leren