Fonctions asynchrones en JavaScript : comprendre « async » et « wait »

Introduction

Dans le modèle de programmation asynchrone de JavaScript, gérer les tâches asynchrones et leur exécution les rappels peuvent conduire à des structures de code complexes. Les fonctions asynchrones, ainsi que les mots-clés « async » et « wait », offrent une approche plus structurée et plus efficace.

Fonctions asynchrones

Les fonctions asynchrones sont des fonctions qui ne bloquent pas le thread principal pendant qu'elles attendre les opérations asynchrones. Ils utilisent le mot-clé "async" et renvoient un objet Promise. Les fonctions asynchrones nous permettent d'écrire du code asynchrone de manière plus synchrone.

"async" et "await"

Le mot-clé "async" est utilisé pour déclarer une fonction comme asynchrone. Le mot-clé « wait » est utilisé dans les fonctions asynchrones pour suspendre leur exécution et attendre qu'une promesse soit remplie. Voici un exemple :

async function fetchUserData(id) {
  const response = await fetch(`https://example.com/users/${id}`);
  const user = await response.json();
  return user;
}

Dans cet exemple, la fonction fetchUserData est marquée comme asynchrone avec le mot-clé "async". Lorsqu'il appelle fetch pour obtenir des données utilisateur, il utilise « attendre » pour suspendre son exécution jusqu'à ce que la récupération soit terminée. Cela nous permet d'utiliser les données utilisateur immédiatement dans le cadre de la fonction.

Avantages des fonctions asynchrones

Les fonctions asynchrones rendent la programmation asynchrone plus gérable et lisible. Ils simplifient la structure du code en éliminant les rappels imbriqués et réduisent le besoin de gestion explicite des promesses. Cela conduit à une meilleure maintenabilité du code et à une réduction du risque d'erreurs.