Promesse vs Observable

les deux promesses et Observables nous aideront à travailler avec les fonctionnalités asynchrones en JavaScript. Ils sont très similaires dans de nombreux cas, cependant, il y a encore quelques différences entre les deux ainsi, les promesses sont des valeurs qui se résoudront dans asynchronous des façons comme appels http . D'autre part, les observables traitent de la séquence des événements asynchrones . Les principales différences sont les suivantes:

promesse:

• ayant une canalisation
• ne s'utilise généralement qu'avec le retour de données async
• pas facile à annuler

observables:

• sont annulables
• sont récupérables par nature tels que le ré-essai et le ré-essai lorsque
• flux de données dans de multiples pipe lines
• ayant des opérations de type tableau comme map, filter etc
• peut être créé à partir d'autres sources comme des événements
• ils sont fonction, qui pourrait être souscrite plus tard

en outre, j'ai créé l'image graphique pour vous ci-dessous pour montrer les différences visuellement:

promesses

1. définition : vous aide à exécuter des fonctions de manière asynchrone, et à utiliser leurs valeurs de retour (ou exceptions) mais une seule fois lorsqu'il est exécuté.
2. Pas Paresseux
3. non annulable. Les deux décisions possibles sont
   • rejet
   • Résoudre
4. ne peut pas être retentée (Promesses devraient avoir accès à la fonction d'origine qui a renvoyé la promesse afin d'avoir une possibilité de relance, ce qui est une mauvaise pratique)

Observables

1. définition : vous aide à exécuter des fonctions de manière asynchrone, et à utiliser leurs valeurs de retour dans une séquence continue ( plusieurs fois ) lorsqu'il est exécuté.
2. Par défaut, il est Paresseux comme il émet des valeurs lorsque le temps progresse.
3. a beaucoup d'opérateur qui simplifie l'effort de codage.

4. one operator Rety peut être utilisé pour Rety lorsque jamais nécessaire, même si nous avons besoin de Rety l'observable basé sur certaines conditions retywhen peut être utilisé.

   Note : une liste des opérateurs ainsi que leurs diagrammes interactifs est disponible ici RxMarbles.com

il manque un inconvénient dans les réponses. Les promesses permettent d'utiliser les fonctions async/attente ES7. Avec eux, vous pouvez écrire du code asynchrone comme si c'était un appel de fonction synchrone, donc vous n'avez plus besoin de callbacks. La seule possibilité pour les Observables de faire cela, est de les convertir en promesses. Mais quand vous les convertissez en promesses, vous ne pouvez avoir qu'une seule valeur de retour:

async function getData(){
    const data = await observable.first().toPromise();
    //do stuff with 'data' (no callback function needed)
}

autre lecture: Comment puis-je "attendre` sur un Rx Observable?

les promesses et les Observables les deux sont de la manipulation de l'appel asynchrone.trouvez ci-dessus image pour la différence principale.

Même si cette réponse est tardive, j'ai résumé les différences ci-dessous,

Observables:

1. Observable est juste un function qui prend an observer et renvoie un function Observer: an object with next, error.
2. permet à L'observateur de subscribe/unsubscribe à son flux de données, émettre valeur suivante pour l'observateur, notify l'observateur à propos de errors et informer l'observateur de la stream completion
3. fournit un observateur function to handle next value ,erreurs et fin du flux (événements ui,réponses http, données avec sockets web).
4. Travaille avec multiple values au fil du temps
5. Il est cancel-able/retry-able et supporte des opérateurs tels que map,filter,reduce etc.
6. créer un Observable peut être - Observable.create() - renvoie Observable qui peut invoquer des méthodes sur - Observer Observable.from() - convertit un tableau ou itérable en - Observable Observable.fromEvent() - convertit un événement en Observable - Observable.fromPromise() - convertit une Promesse en Observable - Observable.range() - renvoie une séquence d'entiers dans la plage spécifiée

promesse :

1. une promesse représente une tâche qui se terminera à l'avenir;

2. les promesses deviennent resolved by a value ;

3. promesses obtenir rejetée par des exceptions;

4. Pas cancellable et il retourne a single value

5. une promesse expose une fonction (then)

   - retourne alors un nouveau promise ;

   - permet le attachment de qui sera exécuté sur la base d' state ;

   - handlers sont guaranteed à exécuter en order attached ;

je viens de traiter d'une question Où les promesses étaient la meilleure solution, et je le partage ici pour quiconque trébuchant à travers cette question dans le cas où il est utile (c'était exactement la réponse que je cherchais plus tôt):

dans un projet Angular2 j'ai un service qui prend quelques paramètres et renvoie une liste de valeurs pour remplir les menus déroulants sur un formulaire. Lorsque le composant form initialise, je dois appeler le même service plusieurs fois avec des paramètres différents. pour définir un certain nombre de différents menus déroulants, cependant si je mets simplement en file d'attente toutes les variables pour appeler le service, seul le dernier réussit et l'erreur du reste. La récupération de service à partir de la base de données ne pouvait traiter qu'une seule demande à la fois.

la seule façon de remplir avec succès toutes les variables du menu déroulant était d'appeler le service d'une manière qui empêchait le traitement d'une nouvelle demande jusqu'à ce que la dernière demande soit terminée, et la promesse / .alors mécanisme résolu le problème joliment.

  fetchValueList(listCode): Promise<any> {
      return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode)
          .map(response => response.json())
          .toPromise();
  }

  initializeDropDowns() {
      this.fetchValueList('First-Val-List')
          .then(data => {
              this.firstValList = data;
              return this.fetchValueList('Second-Val-List')
          }).then(data => {
              this.secondValList = data;
              return this.fetchValueList('Third-Val-List')
          }).then(data => {
              this.thirdValList = data;
          })  }

j'ai défini les fonctions dans le composant, puis appelé initializeDropDowns() dans ngOnInit.

la fonction fetchValueList retourne une promesse, donc le premier appel passe le premier listCode et lorsque la promesse se résout, la valeur de retour est dans la variable de données dans le .ensuite, bloquez où nous pouvons l'affecter au ceci.firstValList variable. Comme la fonction a retourné des données, nous savons que le service a terminé et il est sûr d'appeler à nouveau avec la deuxième listCode, la valeur de retour est dans la variable de données dans la prochaine .alors bloquez et nous l'assignons au ceci.secondValList variable.

nous pouvons enchaîner cela autant de fois que nécessaire pour remplir toutes les variables, et sur le dernier bloc de code nous omettons simplement la déclaration de retour et le bloc se termine.

c'est un cas d'utilisation très spécifique où nous avons un seul service qui doit être appelé plusieurs fois comme le composant initialise, et où le service doit compléter son fetch et retourner une valeur avant de pouvoir être appelé à nouveau, mais dans ce cas, la promesse / .alors la méthode était idéale.

je crois que toutes les autres réponses devraient dissiper vos doutes. Néanmoins, je voulais juste ajouter que les observables sont basés sur la programmation fonctionnelle, et je trouve très utiles les fonctions qui l'accompagnent comme map, flatmap, reduce, zip. La cohérence que le web atteint surtout quand il dépend des requêtes API est une amélioration brutale.

je recommande fortement cette documentation , car c'est la documentation officielle de réactivex et Je trouve que c'est le plus clair.

si vous voulez entrer dans observables je suggérerais ce post de 3partie: http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1 /

bien qu'il soit destiné à RxJava, les concepts sont les mêmes, et il est vraiment bien expliqué. Dans la documentation de réactivex vous avez les équivalences pour chaque fonction. Vous devez chercher RxJS.

J'espère que cela aide, juste essayé contribuer ici. :)

Observables vs promesses

Promises et Observables , tous deux nous fournissent une façon simple qui nous aide à lutter contre la nature asynchrone de nos applications. Toutefois, il existe des différences importantes entre les deux:

• Observables peut définir à la fois la configuration et les aspects de démontage comportement asynchrone.
• Observables sont annulables.
• de plus, Observables peut être récupéré en utilisant l'un des opérateurs de Rety fournis par L'API, tels que Rety et retywhen. D'un autre côté, les promesses exigent que l'appelant ait accès à la fonction originale qui a retourné la promesse afin d'avoir une capacité de Ré-essai.

les Promesses de l'application effective de cette sémantique. Vous pouvez créer une Promesse, qui se résout avec une certaine valeur:

   const numberPromise = new Promise((resolve) => {
    resolve(5);
});

numberPromise.then(value => console.log(value));
// will simply print 5

mais tenter de résoudre la promesse à nouveau avec une autre valeur échouera. La promesse est toujours résolue avec la première valeur transmise à la fonction resolve et ignore les appels ultérieurs à elle:

    const numberPromise = new Promise((resolve) => {
    resolve(5);
    resolve(10);
});

numberPromise.then(value => console.log(value));
// still prints only 5

au contraire, les Observables vous permettent de résoudre (ou, comme on dit," d'émettre") des valeurs multiples. Voici à quoi ça ressemblerait:

    const numberObservable = new Observable((observer) => {
    observer.next(5);
    observer.next(10);
});

numberObservable.subscribe(value => console.log(value));
// prints 5 and 10

notez à quel point la syntaxe est similaire - nous avons changé la promesse à Observable, remplacé résoudre la fonction avec observateur.appel suivant et à la place de puis utilisé subscribe, qui se comporte très similaire.

promesse:

• fournissent une seule valeur future;
• pas paresseux;
• non annulable;

Observables:

• Émet plusieurs valeurs au fil du temps;
• Paresseux;
• annulable;
• supporte les opérateurs map, filter, reduce et similaires

vous pouvez utiliser promet à la place des observables lors de L'appel de HTTP en Angular si vous le souhaitez.

promesse-fournir une seule valeur future. Pas paresseux . Pas capables d'annulation. Il va les rejeter ou de les résoudre.

Observables - Fournir des multiples de valeur d'avenir. Paresseux. Capables d'annulation . Il fournit d'autres méthodes live map,filtrer,réduire.

vue d'ensemble:

• les promesses et les Observables nous aident à traiter les opérations asynchrones. Ils peuvent appeler certains callbacks lorsque ces opérations asynchrones sont effectuées.
• Une Promesse ne peut gérer qu'un seul événement, sont Observables pour des flux d'événements au fil du temps
• Promet ne peut pas être annulée une fois qu'ils sont en attente
• Données Observables émettent peut transformés à l'aide des opérateurs

vous pouvez toujours utiliser un observable pour traiter le comportement asynchrone depuis un observable a la fonctionnalité d'une promesse. Cependant, il arrive parfois que cette fonctionnalité supplémentaire offerte par les Observables ne soit pas nécessaire. Ce serait donc un surcoût pour importer une bibliothèque afin de l'utiliser.

quand utiliser les promesses:

utilisez des promesses Quand vous avez un simple opération async de que vous souhaitez traiter le résultat. Par exemple:

var promise = new Promise((resolve, reject) => {
  // do something once, possibly async
  // code inside the Promise constructor callback is getting executed synchronously

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

//after the promise is resolved or rejected we can call .then or .catch method on it

promise.then((val) => console.log(val))      // logs the resolve argument
       .catch((val) => console.log(val));    // logs the reject argument

ainsi une promesse exécute un code où elle résout ou rejette. Si résoudre ou rejeter est appelé la promesse va d'un état en attente à soit un résolu ou rejeté état. Lorsque l'état de promesse est résolu, la méthode then() est appelée. Lorsque l'état de promesse est rejeté, la méthode catch() est appelé.

quand utiliser les Observables:

utilisez Observables quand il ya un flux au fil du temps qui vous devez être manipulés. Dans L'Observable lui-même est spécifié quand l'événement suivant s'est produit, quand une erreur se produit, ou quand L'Observable est terminé. Nous pouvons ensuite nous abonner à cet observable, qui l'active et dans cet abonnement nous pouvons passer en 3 callbacks (ne pas toujours avoir à passer en tout). Un callback à exécuter pour le succès, un callback pour erreur, et un rappel pour complétion. Par exemple:

const observable = Rx.Observable.create(observer => {
  // create a single value and complete
  observer.onNext(1);
  observer.onCompleted();
});

source.subscribe(
  x => console.log('onNext: %s', x),   //  success callback
  e => console.log('onError: %s', e),  //  error callback
  () => console.log('onCompleted')     //  completion callback
 );

// first we log: onNext: 1
//  then we log: onCompleted

lors de la création d'un observable il nécessite une fonction de rappel qui fournit un observateur comme argument. Sur cet observateur vous pouvez alors appeler onNext , onCompleted , onError . Ensuite, lorsque L'Observable est abonné, il appellera les callbacks correspondants passés dans l'abonnement.

Observables et promesses fournissent tous deux un moyen de travailler avec async activités en JavaScript. Alors que les promesses soit rejeter / résoudre basé sur l'achèvement d'un seul événement asynchrone (requête http), Observables peuvent émettre en continu des changements d'état basés sur les observateurs qui s'y abonnent.

une différence fondamentale entre eux est que l'observable fournit des moyens de annuler a demande et renvoyer un nouveau. Où comme promesse ne permettent pas une telle caractéristique.

aussi, Promise émet une seule valeur alors que Observable émet plusieurs valeurs. Ainsi, lors du traitement D'une requête HTTP, Promise peut gérer une seule réponse pour la même requête, mais que se passe-t-il s'il y a plusieurs réponses à la même requête, alors nous devons utiliser Observable.

brève réponse:

Observables est mieux , il a tous les Promesses fonctions et fonctionnalités supplémentaires.

---

longue réponse:

promesses:

• à Usage unique "Retour les données une seule fois"
"1519250920 de Non-annulation 1519260920"
• auditeur
• Pas De Prise En Charge D'Un Auditeur

Observables:

• Renvoyer les Données autant de fois que les données de changement
• Soutien annuler
• support socket
• Soutien de nombreux Auditeur et de lui notifier lors de changement des données
• Carte de soutien, filtre ,réduire

il y a déjà beaucoup de réponses à ce sujet, donc je ne voudrais pas en ajouter une redondante.

mais pour quelqu'un qui vient de commencer à apprendre Observable / Angular et se demande lequel utiliser comparer avec promesse , je vous recommande de garder tout Observable et de convertir toutes les promesses existantes dans votre projet à Observable.

simplement parce que le cadre angulaire lui-même et C'est la communauté qui utilise Observable. Il serait donc avantageux d'intégrer des services-cadres ou des modules tiers et de tout assembler.

---

bien que j'apprécie toutes les notes négatives, mais j'insiste toujours sur mon opinion ci-dessus à moins que quelqu'un ne mette un commentaire approprié pour énumérer quelques scénarios qui pourraient encore être utiles dans votre projet angulaire d'utiliser des promesses sur Observables.

bien sûr, aucune opinion est 100% correct dans tous les cas, mais au moins je pense que 98% du temps pour les projets commerciaux réguliers mis en œuvre dans un cadre angulaire, Observable est la bonne voie à suivre.

même si vous ne l'aimez pas au point de départ de votre projet de passe-temps simple, vous réaliserez bientôt presque tous les composants avec lesquels vous interagissez en angle, et la plupart du cadre de tierce partie amical angulaire utilisent Observables, et alors vous finirez par convertir constamment votre promesse à Observable afin de communiquer avec eux.

Ces composants inclus, mais non limité à: HttpClient, générateur de Formulaire, Angulaire matériel modules/dialogues, Ngrx store/effets et ngx-bootstrap.

en fait, la seule promesse de L'écosystème angulaire dont j'ai parlé au cours des deux dernières années est APP_INITIALIZER .

expliquer en référence des appels Http angulaires pour L'Api à distance: Promesses est utilisé pour maintenir l'état des appels asynchrones. un les données sont obtenues à partir de l'Api à distance et montrent en vue

et dans Observable proviennent du modèle observable et introduire par Rxjs quand il vous donne la possibilité de mettre à jour les données plusieurs fois dans le flux comme données observables.