Question Promesse vs Observable


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

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


761
2018-05-21 15:43


origine


Réponses:


Promettre

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

Note: Il y a Promise bibliothèques là-bas qui prennent en charge l'annulation, mais ES6 Promise pas si loin.

Observable

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

Souvent Observable est préféré à Promise parce qu'il fournit les caractéristiques de Promise et plus. Avec Observable cela n'a pas d'importance si vous voulez gérer 0, 1 ou plusieurs événements. Vous pouvez utiliser la même API dans chaque cas.

Observable a également l'avantage sur Promise être annulable. Si le résultat d'une requête HTTP à un serveur ou d'une autre opération asynchrone coûteuse n'est plus nécessaire, le Subscription d'un Observable permet d'annuler l'abonnement, alors qu'un Promise finira par appeler le succès ou le rappel échoué même si vous n'avez plus besoin de la notification ou du résultat qu'elle fournit.

Observable fournit les opérateurs comme map, forEach, reduce, ... similaire à un tableau

Il y a aussi des opérateurs puissants comme retry(), ou replay(), ... qui sont souvent très pratiques.


907
2018-05-21 17:19



Promesses:

  • retourner une seule valeur
  • non annulable
  • code plus lisible avec try / catch et async / await

Observables:

  • travailler avec plusieurs valeurs au fil du temps
  • annulable
  • carte de support, filtre, réduire et opérateurs similaires
  • utiliser des extensions réactives (RxJS)
  • un tableau dont les éléments arrivent de manière asynchrone au fil du temps

239
2018-06-07 12:39



Tous les deux Promises et Observables nous fournir des abstractions qui nous aident à faire face à la asynchrone la nature de nos applications. La différence entre eux a été clairement soulignée par @ Günter et @Relu.

Comme un extrait de code vaut mille mots, laissez l'exemple ci-dessous pour les comprendre plus facilement.

Merci @Christoph Burgdorf pour le génial article


Angulaire utilise Rx.js Observables au lieu de promesses pour traiter HTTP.

Supposons que vous construisez un fonction de recherche Cela devrait vous montrer instantanément les résultats que vous tapez. Cela vous semble familier, mais il y a beaucoup de défis associés à cette tâche.

  • Nous ne voulons pas toucher le point de terminaison du serveur chaque fois que l'utilisateur appuie sur une touche, il devrait les inonder d'une tempête de HTTP demandes Fondamentalement, nous voulons seulement le frapper une fois que l'utilisateur a cessé de taper au lieu de chaque frappe.
  • Ne touchez pas le point de terminaison de la recherche avec mêmes paramètres de requête pour les demandes ultérieures.
  • Traiter les réponses hors service. Lorsque nous avons plusieurs demandes en même temps, nous devons tenir compte des cas où ils reviennent dans un ordre inattendu. Imaginez nous le premier type ordinateur, arrêtez, une demande sort, nous tapons voiture, arrêtez, une demande s'éteint. Nous avons maintenant deux demandes en vol. Malheureusement, la demande qui porte les résultats pour ordinateur revient après la demande qui porte les résultats pour voiture.

La démo se composera simplement de deux fichiers: app.ts et wikipedia-service.ts. Dans un scénario réel, nous diviserions probablement les choses plus loin, cependant.


Ci-dessous est Promise implémentation qui ne gère aucun des cas de bordure décrits.

wikipedia-service.ts

import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';

@Injectable()
export class WikipediaService {
  constructor(private jsonp: Jsonp) {}

  search (term: string) {
    var search = new URLSearchParams()
    search.set('action', 'opensearch');
    search.set('search', term);
    search.set('format', 'json');
    return this.jsonp
                .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
                .toPromise()
                .then((response) => response.json()[1]);
  }
}

Nous injectons le Jsonp service pour faire un GET demande contre la API Wikipedia avec un terme de recherche donné. Notez que nous appelons toPromise afin d'obtenir d'un Observable<Response> à un Promise<Response>. Finalement finir avec un Promise<Array<string>> comme le type de retour de notre méthode de recherche.

app.ts

// check the plnkr for the full list of imports
import {...} from '...';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Wikipedia Search</h2>
      <input #term type="text" (keyup)="search(term.value)">
      <ul>
        <li *ngFor="let item of items">{{item}}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  items: Array<string>;

  constructor(private wikipediaService: WikipediaService) {}

  search(term) {
    this.wikipediaService.search(term)
                         .then(items => this.items = items);
  }
}

Pas beaucoup de surprise non plus. Nous injectons notre WikipediaService et exposer ses fonctionnalités via une méthode de recherche au modèle. Le modèle se lie simplement à clé et appels search(term.value).

Nous déballons le résultat de la Promettre que la méthode de recherche de WikipediaService renvoie et l'exposer comme un simple tableau de chaînes au modèle afin que nous puissions avoir *ngFor boucle à travers elle et dresser une liste pour nous.

Voir l'exemple de Promise mise en œuvre sur Plunker


Observables vraiment briller

Changeons notre code pour ne pas marteler le point de terminaison à chaque frappe, mais seulement envoyer une requête lorsque l'utilisateur a cessé de taper pour 400 ms

Pour dévoiler ces super pouvoirs, nous devons d'abord obtenir un Observable<string> qui porte le terme de recherche que l'utilisateur tape. Au lieu de se lier manuellement à l'événement keyup, nous pouvons tirer parti de Angular formControl directif. Pour utiliser cette directive, nous devons d'abord importer ReactiveFormsModule dans notre module d'application.

app.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Une fois importés, nous pouvons utiliser formControl depuis notre template et le définir sous le nom "term".

<input type="text" [formControl]="term"/>

Dans notre composant, nous créons une instance de FormControl de @angular/form et l'exposer comme un champ sous le nom de terme sur notre composant.

Dans les coulisses, terme expose automatiquement un Observable<string> comme propriété valueChanges que nous pouvons nous abonner. Maintenant que nous avons un Observable<string>Surmonter la saisie de l'utilisateur est aussi simple que d'appeler debounceTime(400) sur notre Observable. Cela retournera un nouveau Observable<string> cela n'émettra une nouvelle valeur que s'il n'y a pas eu de nouvelles valeurs depuis 400ms.

export class App {
  items: Array<string>;
  term = new FormControl();
  constructor(private wikipediaService: WikipediaService) {
    this.term.valueChanges
              .debounceTime(400)        // wait for 400ms pause in events
              .distinctUntilChanged()   // ignore if next search term is same as previous
              .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
  }
}

Ce serait un gaspillage de ressources d'envoyer une autre demande pour un terme de recherche que notre application affiche déjà les résultats pour. Tout ce que nous devons faire pour atteindre le comportement désiré est d'appeler le distinctUntilChanged opérateur juste après nous avons appelé debounceTime(400)

Voir l'exemple de Observable mise en œuvre sur Plunker

Pour traiter les réponses hors de l'ordre, veuillez vérifier l'article complet    http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

Dans la mesure où j'utilise Http dans Angular, je suis d'accord que dans les cas d'utilisation normale il n'y a pas beaucoup de différence lors de l'utilisation de Observable sur Promise. Aucun des avantages n'est vraiment pertinent ici dans la pratique. J'espère que je peux voir un cas d'utilisation avancé dans le futur :)


Apprendre encore plus


199
2017-10-19 15:17



Tous les deux Promesses et Observables nous aidera à travailler avec le 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, les promesses sont des valeurs qui vont résoudre dans asynchronous des moyens comme http appels. D'autre part, les observables traitent de la séquence de événements asynchrones. Les principales différences sont énumérées ci-dessous:

promettre:

  • ayant une ligne de conduite
  • habituellement seulement utiliser avec le retour de données async
  • pas facile d'annuler

observable:

  • sont annulables
  • sont réessayables par nature comme réessayer et réessayer
  • flux de données dans plusieurs lignes de canalisation
  • ayant des opérations de type tableau comme carte, filtre, etc.
  • peut être créé à partir d'autres sources comme des événements
  • ils sont la fonction, qui pourrait être souscrite plus tard

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

Promises and Observables image


118
2018-05-07 06:56



Promesses

  1. Définition: vous aide à exécuter des fonctions de manière asynchrone et à utiliser leurs valeurs de retour (ou exceptions), mais juste une fois lorsqu'il est exécuté
  2. Pas paresseux
  3. Non annulable. Les deux décisions possibles sont
    • Rejeter
    • Résoudre
  4. C'est pas possible réessayé(Les promesses devraient avoir accès à la fonction d'origine qui a renvoyé la promesse afin d'avoir une nouvelle tentative, ce qui est une mauvaise pratique)

Observables

  1. Définition: vous aide à exécuter les 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 Lazy car il émet des valeurs lorsque le temps progresse.
  3. A beaucoup d'opérateur qui simplifie l'effort de codage.
  4. Un opérateur recommencez peut être utilisé pour réessayer quand jamais nécessaire, même si nous devons réessayer l'observable en fonction de certaines conditions réessayer peut être utilisé.

    Remarque: Une liste d'opérateurs avec leurs diagrammes interactifs est disponible ici à RxMarbles.com


41
2018-01-09 18:29



Il y a un inconvénient des Observables qui manque dans les réponses. Les promesses permettent d'utiliser les fonctions async / await de ES7. Avec eux, vous pouvez écrire du code asynchrone comme s'il s'agissait d'un appel de fonction synchrone, vous n'avez donc plus besoin de rappels. La seule possibilité pour les Observables de le faire est de les convertir en Promesses. Mais lorsque vous les convertissez en promesses, vous ne pouvez plus avoir qu'une seule valeur de retour:

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

En lire plus: Comment puis-je "attendre" sur un Rx Observable? 


26
2018-06-28 20:45



Je suis un gars des photos, cela manquait dans d'autres réponses:

enter image description here


15
2017-12-06 19:17



 Promises vs Observables

promesses et Observable à la fois traitent l'appel asynchrone only.find ci-dessus   image pour la différence principale.


13
2018-01-17 16:50



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

Observable:

  1. Observable est juste un function qui prend an observeret renvoie un function Observer: an object with next, error.
  2. Observer permet 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. Observer fournit un function to handle next value, erreurs et fin du flux (événements ui, réponses http, données avec socket Web).
  4. Marche avec multiple values heures supplémentaires
  5. C'est cancel-able/retry-able et soutient les 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

Promettre:

  1. Une promesse représente une tâche qui se terminera dans le futur;

  2. Les promesses deviennent resolved by a value;

  3. Les promesses sont rejetées par des exceptions;

  4. ne pas cancellable et ça revient a single value

  5. Une promesse expose une fonction (then) 

    -then renvoie un nouveau promise;

    -autorise le attachment de ce sera exécuté sur la base de state;

    -handlers sont guaranteed exécuter dans order attached;


9
2017-10-08 03:43