web-dev-qa-db-fra.com

Quelle est la différence entre les promesses JavaScript et async wait?

J'utilisais déjà ECMAScript 6 et ECMAScript 7 (grâce à Babel) dans mes applications - mobiles et Web.

La première étape a évidemment été de passer au niveau ECMAScript 6. J'ai appris de nombreux modèles asynchrones, les promesses (qui sont vraiment prometteuses), les générateurs (je ne sais pas pourquoi le symbole *), etc. Et je les utilise beaucoup dans mes applications.

Voici un exemple/pseudocode de la façon dont j'ai mis en œuvre une promesse de base

var myPromise = new Promise(
    function (resolve,reject) {
      var x = MyDataStore(myObj);
      resolve(x);
    });

myPromise.then(
  function (x) {
    init(x);
});

Au fil du temps, je suis tombé sur les fonctionnalités d’ECMAScript 7, dont ASYNC et AWAIT mots-clés/fonctions. Ceux-ci en même temps font de grandes merveilles. J'ai commencé à remplacer certaines de mes promesses par async & await. Ils semblent ajouter une grande valeur au style de programmation.

Encore une fois, voici un pseudo-code de la façon dont ma fonction asynchrone, wait, ressemble à-

async function myAsyncFunction (myObj) {
    var x = new MyDataStore(myObj);
    return await x.init();
}
var returnVal = await myAsyncFunction(obj);

En laissant les erreurs de syntaxe (le cas échéant) de côté, je pense que les deux font exactement la même chose. J'ai presque réussi à remplacer la plupart de mes promesses par des tentatives asynchrones.

Pourquoi async, attendez-vous quand des promesses font un travail similaire?

Async, attend-il résoudre un problème plus important? Ou était-ce simplement une solution différente de rappeler l'enfer?

Comme je l'ai dit plus tôt, je suis capable d'utiliser des promesses et async, attendre pour résoudre le même problème. Y at-il quelque chose de spécifique qui async attendent en attente résolu?

Notes complémentaires:

J'utilise asynchrone, attend et promets dans mes React et modules Node.js de manière approfondie. React en particulier a été un lève-tôt et a adopté de nombreux Fonctions ECMAScript 6 et ECMAScript 7.

javascriptasynchronousreactjsasync-awaitpromise
73
bozzmob

Pourquoi async, attendez-vous quand Promises fait le même travail? Async, attend-il résoudre un problème plus important?

async/await vous donne simplement une sensation synchrone au code asynchrone. C'est une forme très élégante de sucre syntaxique.

Pour les requêtes simples et la manipulation des données, Promises peut être simple, mais si vous rencontrez des scénarios complexes, il est plus facile de comprendre ce qui se passe si le code ressemble simplement comme si c'était synchrone (pour le dire autrement, la syntaxe est en soi une forme de "complexité incidente" qui async/await peut se déplacer).

Si cela vous intéresse, vous pouvez utiliser une bibliothèque telle que co (à côté de générateurs) pour donner le même genre de sensation. Des choses comme celle-ci ont été développées pour résoudre le problème que async/await résout finalement (nativement).

61
Josh Beam

Async/Await fournit une syntaxe beaucoup plus agréable dans des scénarios plus complexes. En particulier, tout ce qui concerne les boucles ou certaines autres constructions comme try/catch.

Par exemple:

while (!value) {
  const intermediate = await operation1();
  value = await operation2(intermediate);
}

Cet exemple serait beaucoup plus compliqué à l’aide de Promises.

29
Stephen Cleary

Ma question est la suivante: pourquoi async, attendez-vous quand Promises fait le même travail? Async, attend-il résoudre un problème plus important? ou était-ce juste une solution différente de rappeler l'enfer? Comme je l'ai dit plus tôt, je suis capable d'utiliser Promises et Async, Wait pour résoudre le même problème. Y a-t-il quelque chose de spécifique que Async Await a résolu?

La première chose à comprendre est que la syntaxe async/await n’est que du sucre syntaxique destiné à augmenter les promesses. En fait, la valeur de retour d'une fonction async est une promesse. La syntaxe async/await nous donne la possibilité d'écrire de manière asynchrone de manière synchrone. Voici un exemple:

Chaîne de promesses:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

Async function:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Dans l'exemple ci-dessus, await attend que la promesse (fetch(url)) soit résolue ou rejetée. Si la promesse est résolue, la valeur est stockée dans la variable response. Si la promesse est rejetée, une erreur est générée et le bloc catch est entré.

Nous pouvons déjà voir que l'utilisation de async/await pourrait être plus lisible que le chaînage de promesses. Cela est particulièrement vrai lorsque le nombre de promesses que nous utilisons augmente. Le chaînage Promise et le async/await résolvent le problème du rappel de rappel et la méthode que vous choisissez est une question de préférence personnelle.

9
Willem van der Veen

Comparaison complète avec les avantages et les inconvénients.

JavaScript simple

  • Pros
  • Ne nécessite aucune bibliothèque ou technologie supplémentaire
  • O ff re la meilleure performance
  • Fournit le meilleur niveau de compatibilité avec les bibliothèques tierces
  • Permet la création d'algorithmes ad hoc et plus avancés
  • Inconvénients
  • Peut nécessiter du code supplémentaire et des algorithmes relativement complexes

Async (bibliothèque)

  • Pros
  • Simplifie les modèles de flux de contrôle les plus courants
  • Est toujours une solution basée sur le rappel
  • Bonne performance
  • Inconvénients
  • Introduit une dépendance externe
  • Pourrait encore ne pas suffire pour les flux avancés

promesses

  • Pros
  • Simplifie grandement les modèles de flux de contrôle les plus courants
  • Traitement des erreurs robuste
  • Partie de la spéci fi cation ES2015
  • Garanties invocation différée de onFulfilled et onRejected
  • Inconvénients
  • Requiert des API basées sur le rappel
  • Introduit un petit succès

Générateurs

  • Pros
  • Donne à l'API non bloquante une apparence bloquante
  • Simplifie la gestion des erreurs
  • Partie de la spéci fi cation ES2015
  • Inconvénients
  • Nécessite une bibliothèque de flux de contrôle complémentaire
  • Nécessite toujours des rappels ou la promesse d'implémenter des flux non séquentiels
  • Nécessite thunkify ou promisify API basées sur non générateur

Async wait

  • Pros
  • Fait en sorte qu'une API non bloquante ressemble à un blocage
  • Syntaxe propre et intuitive
  • Contre
  • Nécessite l'utilisation de Babel ou d'autres transpilers et d'une certaine configuration pour être utilisé aujourd'hui
7
Bozhinovski

Async/wait peut aider à rendre votre code plus propre et plus lisible dans les cas où vous avez besoin d'un flux de contrôle compliqué. Il produit également un code plus convivial pour le débogage. Et permet de traiter les erreurs à la fois synchrones et asynchrones avec seulement try/catch.

J'ai récemment écrit ce billet montrant les avantages de l'async/attente par rapport aux promesses dans certains cas d'utilisation courants avec des exemples de code https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises- cours-tutoriel-c7ec10518dd9

6
Gaafar

les deux sont les moyens de gérer le code asynchrone. Mais il y a une différence entre l'exécution de chacun. Voici l'exécution de travail -

promesse

L'objet Promise représente l'achèvement possible (ou l'échec) d'une opération asynchrone et sa valeur résultante. Il s'agit d'un proxy pour une valeur non nécessairement connue au moment de sa création et représente le résultat futur d'une opération asynchrone.

Le code appelant peut attendre que cette promesse soit remplie avant d'exécuter l'étape suivante. Pour ce faire, la promesse a une méthode nommée then, qui accepte une fonction qui sera invoquée une fois la promesse remplie.

Async/wait

Quand une fonction async est appelée, elle retourne un Promise. Lorsque la fonction async renvoie une valeur, le Promise sera résolu avec la valeur renvoyée. Lorsque la fonction async lève une exception ou une valeur, la promesse sera rejetée avec la valeur levée.

Une fonction asynchrone peut contenir une expression wait, qui suspend l'exécution de la fonction asynchrone et attend la résolution de la promesse transmise, puis reprend l'exécution de la fonction asynchrone et renvoie la valeur résolue.

les pros de l'async/attendent sur la promesse

  • Async/wait est construit afin de donner une syntaxe propre à la sémantique de continuation des opérations asynchrones.
  • Cela évite le rappel/la promesse de l'enfer.
4
Samiksha Jagtap