`async` in JavaScript en TypeScript

Zonder `async` zou u handmatig Promises moeten instantiëren:

function getValueOld(): Promise<number> {
  return Promise.resolve(42);
}

Stappen

Stap 1: Zet een functie om naar `async`

Voeg `async` toe vóór `function` of vóór de parameters bij een arrow function. Dit maakt de functie asynchroon en geeft u toegang tot `await` binnen de functie.

async function fetchData() {
  // asynchrone code hier
}</p><p>const fetchDataArrow = async () => {
  // asynchrone code hier
};

Stap 2: Gebruik `await` voor Promise-achtige waarden

`await` pauzeert de uitvoering van de functie totdat de Promise is afgehandeld. Het werkt met elk object dat een `.then()`-methode heeft — een "thenable" — niet alleen met native Promises.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

In dit voorbeeld wacht `await` eerst op de `fetch()`-Promise, daarna op de `.json()`-Promise. De code leest als synchrone instructies, maar blokkeert de event loop niet.

Stap 3: Vang fouten af met `try`/`catch`

Gebruik standaard `try`/`catch`-blokken binnen `async`-functies. Dit is een bekende, intuïtieve manier om fouten te behandelen, in tegenstelling tot `.catch()`-chains waar fouten gemakkelijk gemist worden.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Stap 4: Vang fouten op bij de aanroep

Omdat `async`-functies Promises retourneren, kunt u ook `.catch()` gebruiken bij de aanroep. Dit is nuttig als u de foutafhandeling buiten de functie wilt houden.

fetchData().catch((error) => {
  console.error('Fout bij fetchData:', error);
});

Stap 5: Gebruik `await` op top-level in modules

In moderne JavaScript en TypeScript kunt u `await` gebruiken buiten een `async`-functie, mits u in een module werkt. Dit vereenvoudigt initiële asynchrone setup-code.

// Alleen in modules (ESM)
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);

Stap 6: Transpileer voor oudere omgevingen

TypeScript 2.1 en hoger transpileert `async`/`await` naar ES3/ES5-code met generatoren en een Promise-polyfill. Zonder Promise-polyfill werkt de gegenereerde code niet in ES3/ES5-omgevingen.

tsc --target es5 --lib es2015.promise,dom app.ts

Stap 7: Gebruik `async`/`await` in Node.js

Node.js ondersteunt `async`/`await` native sinds versie 8. Gebruik het voor bestandsoperaties, databaseverbindingen en HTTP-verzoeken om de event loop niet te blokkeren.

import { readFile } from 'fs/promises';</p><p>async function readConfig() {
  try {
    const data = await readFile('./config.json', 'utf-8');
    return JSON.parse(data);
  } catch (error) {
    console.error('Kan config niet lezen:', error);
    return {};
  }
}

Stap 8: Combineer met Promise.all voor parallelle uitvoering

`await` serialiseert operaties. Voor parallelle taken gebruikt u `Promise.all` met `await`.

async function fetchMultiple() {
  const [users, posts] = await Promise.all([
    fetch('https://api.example.com/users').then(r => r.json()),
    fetch('https://api.example.com/posts').then(r => r.json())
  ]);
  return { users, posts };
}

Verificatie

Controleer of uw omgeving `async`/`await` correct ondersteunt:

node -e "async function test() { return 'ok'; } test().then(console.log)"

Dit zou `ok` moeten printen. Voor TypeScript:

tsc --version

Dit zou versie 2.1 of hoger moeten tonen voor ES3/ES5-transpilatie.

Veelgestelde problemen

Probleem 1: `await` buiten `async`-functie

Foutmelding: `SyntaxError: await is only valid in async functions and the top level bodies of modules`

Oplossing: Zet `await` binnen een `async`-functie, of zorg dat uw bestand een module is door `"type": "module"` in `package.json` te zetten of door een `export`-statement toe te voegen.

Probleem 2: Thenables met verkeerde implementatie

Symptoom: Oneindige wachttijden of onverwacht gedrag bij `await`.

Oplossing: Controleer dat het object een correcte `.then()`-methode heeft die de `resolve`- en `reject`-callbacks aanroept. Een thenable die nooit resolve of reject hangt de `await`-expressie voor altijd.

Probleem 3: TypeScript transpileert niet naar oudere targets

Foutmelding: `Type 'Promise<...>' is not assignable to type 'void'` of runtime-fouten in oudere browsers.

Oplossing: Gebruik TypeScript 2.1 of hoger met `--target es5` en voeg een Promise-polyfill toe. Voor Node.js 4-7 heb je een generator-polyfill nodig, of upgrade naar Node.js 8 of hoger voor native ondersteuning.

Versiegeschiedenis

TypeScript introduceerde `async`/`await` in versie 1.7, afhankelijk van ES6-generators in de runtime. TypeScript 2.1 breidde de ondersteuning uit naar ES3/ES5 via transpilatie met een Promise-polyfill. De implementatie volgt de ES2016-specificatie (ES7), wat interoperabiliteit met vanilla JavaScript garandeert. JavaScript zelf heeft `async`/`await` native sinds april 2017 in moderne browsers.

De combinatie van `async` en `await` heeft de manier waarop asynchrone code geschreven wordt fundamenteel veranderd. Frameworks zoals Express, NestJS en React zijn ontworpen met deze constructie in gedachten. De syntaxis vermindert fouten, verbetert de leesbaarheid en vereenvoudigt het testen — maar de onderliggende Promises en de event loop blijven bepalen hoe uw code zich in de praktijk gedraagt.

← Terug naar kennisbank