`async` en JavaScript et TypeScript

Sans `async`, vous devriez instancier des Promises manuellement :

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

Étapes

Étape 1 : Transformez une fonction en `async`

Ajoutez `async` avant `function` ou avant les paramètres d'une fonction fléchée. Cela rend la fonction asynchrone et vous donne accès à `await` dans la fonction.

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

Étape 2 : Utilisez `await` pour les valeurs de type Promise

`await` met en pause l'exécution de la fonction jusqu'à ce que la Promise soit traitée. Cela fonctionne avec tout objet ayant une méthode `.then()` — un « thenable » — pas seulement avec les Promises natives.

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

Dans cet exemple, `await` attend d'abord la Promise de `fetch()`, ensuite la Promise de `.json()`. Le code se lit comme des instructions synchrones, mais ne bloque pas la boucle d'événements.

Étape 3 : Attrapez les erreurs avec `try`/`catch`

Utilisez des blocs `try`/`catch` standard dans les fonctions `async`. C'est une manière connue et intuitive de gérer les erreurs, contrairement aux chaînes `.catch()` où les erreurs sont facilement manquées.

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('Erreur lors de la récupération des données :', error);
  }
}

Étape 4 : Attrapez les erreurs à l'appel

Comme les fonctions `async` retournent des Promises, vous pouvez aussi utiliser `.catch()` à l'appel. C'est utile si vous voulez garder la gestion des erreurs en dehors de la fonction.

fetchData().catch((error) => {
  console.error('Erreur dans fetchData :', error);
});

Étape 5 : Utilisez `await` au niveau supérieur dans les modules

En JavaScript et TypeScript modernes, vous pouvez utiliser `await` en dehors d'une fonction `async`, à condition de travailler dans un module. Cela simplifie le code d'initialisation asynchrone.

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

Étape 6 : Transpilez pour les environnements plus anciens

TypeScript 2.1 et supérieur transpile `async`/`await` en code ES3/ES5 avec des générateurs et un polyfill Promise. Sans polyfill Promise, le code généré ne fonctionne pas dans les environnements ES3/ES5.

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

Étape 7 : Utilisez `async`/`await` dans Node.js

Node.js supporte `async`/`await` nativement depuis la version 8. Utilisez-le pour les opérations sur fichiers, les connexions à la base de données et les requêtes HTTP afin de ne pas bloquer la boucle d'événements.

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('Impossible de lire la config :', error);
    return {};
  }
}

Étape 8 : Combinez avec Promise.all pour une exécution parallèle

`await` sérialise les opérations. Pour les tâches parallèles, utilisez `Promise.all` avec `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 };
}

Vérification

Vérifiez que votre environnement supporte correctement `async`/`await` :

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

Cela devrait afficher `ok`. Pour TypeScript :

tsc --version

Cela devrait afficher la version 2.1 ou supérieure pour la transpilation ES3/ES5.

Problèmes fréquents

Problème 1 : `await` en dehors d'une fonction `async`

Message d'erreur : `SyntaxError: await is only valid in async functions and the top level bodies of modules`

Solution : Mettez `await` dans une fonction `async`, ou assurez-vous que votre fichier est un module en définissant `"type": "module"` dans `package.json` ou en ajoutant une déclaration `export`.

Problème 2 : Thenables avec une mauvaise implémentation

Symptôme : Temps d'attente infinis ou comportement inattendu avec `await`.

Solution : Vérifiez que l’objet possède une méthode `.then()` correcte qui appelle les callbacks `resolve` et `reject`. Une thenable qui ne résout ni ne rejette jamais bloque l’expression `await` pour toujours.

Problème 3 : TypeScript ne transpile pas vers des cibles plus anciennes

Message d’erreur : `Type 'Promise<...>' is not assignable to type 'void'` ou des erreurs d’exécution dans les navigateurs plus anciens.

Solution : Utilisez TypeScript 2.1 ou supérieur avec `--target es5` et ajoutez un polyfill pour Promise. Pour Node.js 4-7, vous avez besoin d’un polyfill pour les générateurs, ou passez à Node.js 8 ou supérieur pour une prise en charge native.

Historique des versions

TypeScript a introduit `async`/`await` dans la version 1.7, en dépendant des générateurs ES6 dans l’environnement d’exécution. TypeScript 2.1 a étendu la prise en charge à ES3/ES5 via la transpilation avec un polyfill pour Promise. L’implémentation suit la spécification ES2016 (ES7), ce qui garantit l’interopérabilité avec le JavaScript vanille. JavaScript lui-même dispose de `async`/`await` de manière native depuis avril 2017 dans les navigateurs modernes.

La combinaison de `async` et `await` a fondamentalement changé la manière dont le code asynchrone est écrit. Des frameworks comme Express, NestJS et React sont conçus en tenant compte de cette construction. La syntaxe réduit les erreurs, améliore la lisibilité et simplifie les tests — mais les Promises sous-jacentes et la boucle d’événements continuent de déterminer comment votre code se comporte réellement.

← Retour à la base de connaissances