example - promise angular 5




Quelle est la différence entre Promises et Observables? (16)

Quelqu'un peut-il s'il vous plaît expliquer la différence entre Promise et Observable in Angular?

Un exemple sur chacun serait utile pour comprendre les deux cas. Dans quel scénario pouvons-nous utiliser chaque cas?


Promises et Observables nous aident à gérer les opérations asynchrones. Ils peuvent appeler certains rappels lorsque ces opérations asynchrones sont effectuées.

Angular utilise Observables qui provient de RxJS au lieu de promesses de traitement avec HTTP.

Below are some important differences in promises & Observables.


Vous trouverez ci-dessous quelques différences importantes dans les promesses et les observables.

Promettre

  • N'émet qu'une seule valeur
  • Non annulable
  • Pas partageable
  • Toujours asynchrone

Observable

  • Emet plusieurs valeurs
  • S'exécute seulement quand il est appelé ou quelqu'un s'abonne
  • Peut être annulable
  • Peut être partagé et souscrit cette valeur partagée par plusieurs abonnés. Et tous les abonnés seront exécutés à un moment donné.
  • éventuellement asynchrone

Pour une meilleure compréhension, consultez le https://stackblitz.com/edit/observable-vs-promises


Promise vs similitude observable en premier

  1. Les deux utilisaient pour gérer le code async.
  2. S'il vous plaît chercher un exemple de promesse. Le constructeur Promise transmet une fonction de référence de résolution qui sera appelée lorsqu'elle sera appelée avec une valeur à la fin d'une tâche asynchrone.
ngOnInit() {
  // promise api
  this.service.getData().then(d => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });

  // observable api
  this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });
}
  1. Exemple observable maintenant. Ici aussi nous passons une fonction à observable, un observateur pour gérer la tâche asynchrone. Contrairement à resol dans la promesse, il utilise la méthode suivante et souscrit à la place de then.

  2. Donc, les deux gère les tâches asynchrones. Voyons maintenant la différence.

var promise_eg = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise_eg.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise_eg);

Promise vs différence observable

Promettre

  1. Il résout ou rejette une valeur unique et peut gérer une tâche asynchrone à une valeur à la fois.
  2. Une promesse une fois résolue la valeur asynchrone qu’elle complète ne peut plus être utilisée. Elle n’est utilisée qu’une seule fois et ici, elle est insuffisante.
  3. Non annulable
  4. Pas de support rxjs pour les opérateurs.

Observable

  1. possibilité d'émettre plusieurs valeurs asynchrones.
  2. Utilisé pour gérer le flux d'événements ou de valeurs. Considérez que vous avez un tableau de nombreuses tâches ou valeurs et que vous voulez que chaque valeur insérée y soit traitée automatiquement. Chaque fois que vous introduisez une valeur dans ce tableau, tous ses abonnés recevront automatiquement la dernière valeur.
  3. Les observables sont utiles pour observer les modifications d’entrée, les intervalles répétés, les valeurs de diffusion pour tous les composants enfants, les notifications push de socket Web, etc.
  4. Peut être annulé en utilisant la méthode de désinscription à tout moment.
  5. Une dernière bonne promesse est le support pour les opérateurs de rxjs. Vous avez de nombreux opérateurs de canal principalement mapper, filtrer, switchMap, combineLatest, etc. pour transformer des données observables avant de vous abonner.


Promettre:

  • Fournir une seule valeur future;
  • Pas paresseux;
  • Non annulable;

Observable:

  • Emet plusieurs valeurs au fil du temps;
  • Paresseux;
  • Annulable;
  • Prend en charge les opérateurs de mappage, de filtrage, de réduction et similaires

Vous pouvez utiliser des promesses au lieu d'observables lorsque vous appelez HTTP dans Angular si vous le souhaitez.


Il y a déjà beaucoup de réponses à ce sujet, donc je n'en ajouterais pas de redondant.

Mais pour quelqu'un qui vient juste de commencer à apprendre Observable / Angular et se demande lequel utiliser par rapport à Promise , je vous recommanderais de tout garder Observable et de convertir toutes les promesses existantes de votre projet en Observable.

Tout simplement parce que le cadre angulaire lui-même et sa communauté utilisent tous Observable. Il serait donc bénéfique d'intégrer des services-cadre ou des modules tiers et de tout chaîner.

Bien que j'apprécie tous les votes négatifs mais j'insiste toujours sur mon opinion ci-dessus, à moins que quelqu'un ne mette un commentaire approprié pour répertorier quelques scénarios qui pourraient encore être utiles dans votre projet Angular pour utiliser Promises over Observables.

Bien sûr, aucun avis n’est correct à 100% dans tous les cas, mais au moins, je pense que 98% du temps nécessaire aux projets commerciaux réguliers mis en œuvre dans le cadre angulaire, Observable est la bonne voie à suivre.

Même si vous n'aimez pas cela au début de votre projet de loisir simple, vous réaliserez bientôt presque tous les composants avec lesquels vous interagissez dans Angular, et la plupart des infrastructures tierces respectueuses de Angular utilisent des observables. fini de convertir constamment votre promesse en observable afin de communiquer avec eux.

Ces composants incluent, mais ne se limitent pas à: HttpClient, Générateur de formulaires, Modules de matériaux angulaires / dialogues, Magasin / effets Ngrx et ngx-bootstrap.

En fait, la seule promesse de l’écosystème angulaire que j’ai traitée au cours des deux dernières années est APP_INITIALIZER .


Je vois beaucoup de gens utiliser l'argument selon lequel Observable est "annulable", mais il est plutôt trivial de rendre Promise "annulable"

const observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('Hello from a Observable!');
  }, 2000);
});

observable.subscribe(value => console.log(value));


Observables et Promises nous aident à utiliser les fonctionnalités asynchrones de JavaScript / typescript. Ils sont très similaires dans de nombreux cas, cependant, il existe encore des différences entre eux.


Quelque chose que je rencontrais et qui ne ressortait pas de la première lecture du tutoriel et de la documentation était l'idée de la multidiffusion.

Assurez-vous que, par défaut, plusieurs abonnements déclenchent plusieurs exécutions dans un observable. Plusieurs abonnements à un seul appel HTTP Observable déclenchent plusieurs appels HTTP identiques, sauf si vous .share() (activez la multidiffusion).

Une promesse vous oblige à traiter une chose à la fois, à décompresser ses données, à gérer les exceptions, à la prise en charge linguistique de choses intéressantes telles que async / wait, et c'est plutôt simple.

Un observable a beaucoup de cloches et de sifflets, mais vous devez comprendre le pouvoir avec lequel vous travaillez ou il peut être utilisé à mauvais escient.


Je crois que toutes les autres réponses devraient effacer vos doutes. Néanmoins, je voulais juste ajouter que les observables sont basés sur une programmation fonctionnelle, et je trouve très utile les fonctions qui vont avec, comme map, flatmap, réduire, zip. La cohérence obtenue par le Web, en particulier lorsque cela dépend des demandes d'API, constitue une amélioration brutale.

Je recommande fortement cette documentation , car c'est la documentation officielle de reactiveX et je la trouve la plus claire possible.

Si vous voulez entrer dans observables, je suggérerais ce post en 3 parties: http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/

Bien que cela soit destiné à RxJava, les concepts sont les mêmes et sont très bien expliqués. Dans la documentation de reactiveX, vous avez les équivalences pour chaque fonction. Vous devez chercher RxJS.


Je viens de traiter d'un problème pour lequel Promises était la meilleure solution, et je le partage ici pour tous ceux qui tombent sur cette question au cas où cela serait utile (c'était exactement la réponse que je recherchais plus tôt):

Dans un projet Angular2, j'ai un service qui prend certains paramètres et retourne une liste de valeurs pour remplir les menus déroulants d'un formulaire. Lorsque le composant de formulaire s'initialise, je dois appeler plusieurs fois le même service avec des paramètres différents pour définir un certain nombre de menus déroulants. Toutefois, si je mets simplement en file d'attente toutes les variables pour appeler le service, seule la dernière réussit et l'erreur de repos en dehors. Le service extrait de la base de données ne pouvait traiter qu'une demande à la fois.

Le seul moyen de renseigner toutes les variables du menu déroulant consiste à appeler le service de manière à empêcher le traitement d'une nouvelle demande jusqu'à la fin de la dernière demande et à ce que le mécanisme Promise / .then résolve le problème de manière satisfaisante.

  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 renvoie une promesse. Le premier appel passe donc le premier listCode et, lorsque la promesse est résolue, la valeur de retour se trouve dans la variable de données du bloc .then, où nous pouvons l'affecter à la variable this.firstValList. Comme la fonction a renvoyé des données, nous savons que le service est terminé et que le second listCode peut être rappelé en toute sécurité. La valeur de retour se trouve dans la variable de données du bloc .then suivant et nous l'affectons à la variable this.secondValList.

Nous pouvons le chaîner autant de fois que nécessaire pour renseigner toutes les variables et, dans le dernier bloc de code, nous omettons simplement l'instruction return et le bloc se termine.

Il s'agit d'un cas d'utilisation très spécifique dans lequel un seul service doit être appelé plusieurs fois à l'initialisation du composant et où le service doit terminer son extraction et renvoyer une valeur avant de pouvoir être rappelé, mais dans ce cas, la méthode Promise / .then était idéale.


Promesse - Fournir une valeur future unique. Pas paresseux . Non annulable. Ce sera soit rejeter ou résoudre.

Observable - Fournit une valeur future multiple. Paresseux . Annulable. Il fournit d'autres méthodes en direct carte, filtrer, réduire.


Promises et Observables ne gèrent que l'appel asynchrone.

Voici les différences entre eux:

Observable

  1. Emet plusieurs valeurs sur une période de temps
  2. N'est pas appelé avant de s'inscrire à l'Observable
  3. Peut être annulé en utilisant la méthode unsubscribe ()
  4. Fournit la carte, forEach, filtre, réduit, réessaie et réessayeWhen opérateurs

Promettre

  1. N'émet qu'une seule valeur à la fois

  2. Appelle les services sans .then et .catch

  3. Ne peut être annulé

  4. Ne fournit aucun opérateur


Promettre:

Un gestionnaire d'événement asynchrone - L'objet Promise représente l'achèvement éventuel (ou l'échec) d'une opération asynchrone et la valeur qui en résulte.

Syntaxe: new Promise (exécuteur);

Par exemple:

import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';

range(1, 200).pipe(
  filter(x => x % 2 === 1),
  map(x => x + x)
).subscribe(x => console.log(x));

À propos de Promise: Il n’a qu’un seul pipeline, il ne renverra des valeurs qu’une fois lorsqu’il sera appelé. son gestionnaire à sens unique, donc une fois appelé, vous ne pourrez peut-être pas annuler. syntaxe utile, vous pouvez jouer, quand () et ensuite ()

Observables:

Les observables sont des collections paresseuses de valeurs multiples dans le temps. c'est vraiment une excellente approche pour les opérations asynchrones. cela peut être fait avec rxjs qui a un support de plateforme croisé peut utiliser angular / react etc.

son acte comme un liner. peut être multi pipeline. Ainsi, une fois défini, vous pouvez vous abonner pour obtenir des résultats de retour dans de nombreux endroits.

Syntaxe: import * as Rx from "@reactivex/rxjs"; to init:

function cancellablePromise(body) {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res; reject = rej;
    body(resolve, reject)
  })
  promise.resolve = resolve;
  promise.reject = reject;
  return promise
}

// Example 1: Reject a promise prematurely
const p1 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('10', 100))
})

p1.then(value => alert(value)).catch(err => console.error(err))
p1.reject(new Error('denied')) // expect an error in the console

// Example: Resolve a promise prematurely
const p2 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('blop'), 100)
})

p2.then(value => alert(value)).catch(err => console.error(err))
p2.resolve(200) // expect an alert with 200

etc

s'inscrire: RxLogger.getInstance();

Par exemple:

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Hello from a Promise!");
  }, 2000);
});

promise.then(value => console.log(value));

comme il prend en charge le multi-pipeline et que vous pouvez souscrire à un endroit différent, il a beaucoup plus de possibilités que de promesses.

Utilisation: il a plus de possibilités comme map, filter, pipe, map, concatMap etc


Réponse courte :

Observable est meilleur , il a toutes les fonctionnalités de Promises plus des fonctionnalités supplémentaires.

Longue réponse:

Promesses:

  • Utilisation unique "Renvoyer les données une fois"
  • Non annuler
  • Un auditeur
  • No Socket Support One Listener

Observable:

  • Renvoyer les données plusieurs fois lorsque les données changent
  • Soutien annuler
  • Prise de soutien
  • Soutenir de nombreux auditeurs et les avertir lorsque des données changent
  • Soutenez la carte, filtrez, réduisez

Promettre

Une Promise gère un seul événement lorsqu'une opération asynchrone se termine ou échoue.

Remarque: Il existe des bibliothèques Promise qui prennent en charge l'annulation, mais ES6 Promise ne le fait pas jusqu'à présent.

Observable

Un Observable est comme un Stream (dans de nombreuses langues) et permet de ne transmettre aucun ou plusieurs événements où le rappel est appelé pour chaque événement.

Souvent, Observable est préférable à Promise car elle fournit les fonctionnalités de Promise et plus encore. Avec Observable , peu importe si vous voulez gérer 0, 1 ou plusieurs événements. Vous pouvez utiliser la même API dans chaque cas.

Observable également l'avantage sur Promise d'être annulable . Si le résultat d'une requête HTTP adressée à un serveur ou d'une opération asynchrone coûteuse n'est plus nécessaire, l' Subscription d'un Observable permet d'annuler l'abonnement, alors qu'une Promise appellera éventuellement le rappel réussi ou échoué, même si ce n'est pas le cas. besoin de la notification ou du résultat qu'il fournit plus.

Observable fournit des opérateurs tels que map , forEach , reduce , ... similaire à un tableau

Il existe également des opérateurs puissants tels que retry() ou replay() , ... qui sont souvent très pratiques.


Promises et Observables nous aideront à utiliser les fonctionnalités asynchrones de JavaScript. Ils sont très similaires dans de nombreux cas, cependant, il existe encore quelques différences entre les deux. Les promesses sont des valeurs qui vont se résoudre de asynchronous , comme les appels http . Par contre, les observables traitent une séquence d' événements asynchrones . Les principales différences entre eux sont énumérés ci-dessous:

promettre:

  • avoir un pipeline
  • généralement utilisé uniquement avec le retour de données asynchrone
  • pas facile d'annuler

observable:

  • sont annulables
  • sont récupérables par nature, tels que réessayer et réessayer quand
  • flux de données dans plusieurs pipelines
  • avoir des opérations de type tableau comme map, filter etc
  • peut être créé à partir d'autres sources telles que des événements
  • ce sont des fonctions, qui pourraient être souscrites plus tard

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





angular-observable