Fonction asynchrone

Enchaîner plusieurs appels réseau dépendants les uns des autres avec .then() produit vite un code en cascade, difficile à relire une fois la troisième ou quatrième étape ajoutée. Les fonctions asynchrones règlent ce problème d’écriture sans changer le fonctionnement sous-jacent : à l’intérieur d’une fonction déclarée avec async, le mot-clé await met en pause l’exécution de cette fonction (et seulement elle) jusqu’à ce que la promesse se résolve, avec une syntaxe qui ressemble à du code synchrone classique.

Un usage courant dans le JavaScript de WordPress

Un bloc personnalisé qui doit charger une liste d’articles avant d’afficher un aperçu écrit typiquement une fonction asynchrone qui appelle apiFetch avec await, plutôt qu’un enchaînement de .then(). C’est aussi la forme la plus lisible pour combiner plusieurs appels à l’API REST de WordPress qui dépendent les uns des autres, par exemple récupérer un article puis, avec son identifiant d’auteur, récupérer les informations de cet auteur.

Exemple

async function chargerArticleEtAuteur( id ) {
  const article = await wp.apiFetch({ path: `/wp/v2/posts/${ id }` });
  const auteur = await wp.apiFetch({ path: `/wp/v2/users/${ article.author }` });
  return { article, auteur };
}

Pièges fréquents

• Utiliser await en série pour des appels indépendants ralentit inutilement le traitement : mieux vaut alors les lancer ensemble avec Promise.all() plutôt que les uns après les autres.
• Oublier try/catch autour d’un await laisse une erreur réseau se propager sans être interceptée proprement, une source fréquente d’erreurs silencieuses en console.
• Une fonction asynchrone renvoie toujours une promesse, même si son code interne n’en a pas l’air : l’oublier conduit parfois à manipuler par erreur une promesse comme si c’était déjà la valeur finale.