Maison >interface Web >js tutoriel >Pourquoi les fonctions asynchrones en JavaScript renvoient-elles une promesse et non la valeur ?

Pourquoi les fonctions asynchrones en JavaScript renvoient-elles une promesse et non la valeur ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-18 10:47:03469parcourir

Why Do Async Functions in JavaScript Return a Promise and Not the Value?

La fonction asynchrone renvoie une promesse, pas une valeur : dévoiler la déconnexion

La programmation asynchrone en JavaScript a provoqué une révolution dans l'exécution du code. Les fonctions asynchrones, en particulier, sont devenues un moyen populaire d'écrire du code qui ne bloque pas la boucle d'événements principale. Cependant, un piège courant rencontré lorsqu’on traite des fonctions asynchrones est qu’elles ne renvoient pas directement la valeur finale mais plutôt une promesse. Cela peut prêter à confusion, en particulier pour les développeurs familiarisés avec la programmation synchrone traditionnelle.

Pour comprendre pourquoi les fonctions asynchrones se comportent de cette façon, il est important de saisir le concept de boucle d'événements JavaScript. La boucle d'événements est un système monothread qui gère toutes les tâches et rappels dans le navigateur ou l'environnement Node.js. Lorsqu'une fonction asynchrone est appelée, elle renvoie immédiatement une promesse. La promesse représente le résultat éventuel de la tâche asynchrone. Cependant, la fonction elle-même n'attend pas la fin de la tâche avant de renvoyer la promesse. Cela permet au code suivant de continuer à s'exécuter sans être bloqué.

Considérez le code suivant :

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

fetchData().then((data) => {
  console.log(data);
});

Dans cet exemple, la fonction fetchData renvoie une promesse qui représente le résultat final de l'opération de récupération. . Cependant, la fonction elle-même n'attend pas la fin de la récupération avant de renvoyer la promesse. Par conséquent, l'instruction console.log(data) ne s'exécutera pas tant que la promesse ne sera pas résolue.

Pour accéder à la valeur finale d'une fonction asynchrone, vous devez utiliser les méthodes .then() ou wait. La méthode .then() attache une fonction de rappel qui sera exécutée lorsque la promesse sera résolue. Dans l'exemple ci-dessus, la méthode .then() est utilisée pour imprimer les données renvoyées par la fonction fetchData.

Vous pouvez également utiliser le mot-clé wait dans une autre fonction asynchrone pour attendre la résolution de la promesse. Ceci n'est possible que dans les fonctions asynchrones, comme indiqué dans le code suivant :

async function callFetchData() {
  const data = await fetchData();
  console.log(data);
}

callFetchData();

Dans cet exemple, la fonction callFetchData utilise le mot-clé wait pour attendre la résolution de la fonction fetchData avant d'imprimer les données.

Comprendre la différence entre la valeur de retour d'une fonction asynchrone et la promesse qu'elle représente est crucial pour écrire du code asynchrone efficace et robuste. En utilisant la méthode .then() ou le mot-clé wait, vous pouvez accéder à la valeur finale d'une fonction asynchrone et éviter les pièges courants associés aux promesses.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn