Versprechen vs Observable

Sowohl Promises als auch Observables liefern uns Abstraktionen, die uns beim Umgang mit der asynchronen-Natur unserer Anwendungen helfen. Der Unterschied zwischen ihnen wurde von @ Günter und @Relu deutlich gemacht. 

Da ein Code-Snippet mehr als tausend Worte wert ist, lassen Sie uns das folgende Beispiel durchgehen, um sie besser zu verstehen. 

Danke @Christoph Burgdorf für den tollen Artikel

Angular verwendet Rx.js Observables anstelle von Versprechungen für den Umgang mit HTTP.

Angenommen, Sie erstellen ein Suchfunktion, das Ihnen bei der Eingabe sofort die Ergebnisse anzeigen soll. Klingt vertraut, aber es gibt viele Herausforderungen, die sich aus dieser Aufgabe ergeben.

• Wir möchten den Server-Endpunkt nicht jedes Mal erreichen, wenn der Benutzer eine Taste drückt, er sollte sie mit einem Sturm von HTTP-Anforderungen überfluten. Grundsätzlich möchten wir es nur dann treffen, wenn der Benutzer nicht mehr mit jedem Tastendruck eingibt.
• Treffen Sie den Suchendpunkt nicht mit gleichen Abfrageparametern für nachfolgende Anforderungen.
• Umgang mit Antworten außerhalb der Reihenfolge. Wenn wir während des Fluges mehrere Anfragen gleichzeitig haben, müssen wir die Fälle berücksichtigen, in denen sie unerwartet zurückkommen. Stellen Sie sich vor, wir geben zuerst Computer ein, stoppen, eine Anforderung geht aus, wir geben Auto ein, stoppen, eine Anforderung geht aus. Jetzt haben wir zwei Anfragen während des Fluges. Leider kommt die Anforderung, die die Ergebnisse für Computer enthält, nach der Anforderung zurück, die die Ergebnisse für Auto enthält. 

Die Demo besteht einfach aus zwei Dateien: app.ts und wikipedia-service.ts. In einem realen Szenario würden wir die Dinge jedoch höchstwahrscheinlich weiter aufteilen.

Nachfolgend finden Sie eine Promise-basierte Implementierung, die keine der beschriebenen Edge-Fälle behandelt.

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]);
  }
}

Wir injizieren den Jsonp-Dienst, um eine GET-Anforderung gegen die Wikipedia-API mit einem bestimmten Suchbegriff abzugeben. Beachten Sie, dass wir toPromise aufrufen, um von einem Observable<Response> zu einem Promise<Response> zu gelangen. Am Ende steht schließlich ein Promise<Array<string>> als Rückgabetyp unserer Suchmethode.

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);
  }
}

Auch hier keine große Überraschung. Wir injizieren unsere WikipediaService und stellen ihre Funktionalität über eine Suchmethode in der Vorlage zur Verfügung. Die Vorlage bindet sich einfach an keyup und ruft search(term.value) auf.

Wir entpacken das Ergebnis von Promise, das die Suchmethode von WikipediaService zurückgibt, und legen es als einfaches Array von Strings für die Vorlage zur Verfügung, sodass wir *ngFor durchlaufen und eine Liste für uns erstellen können.

Siehe das Beispiel der Implementierung von Promise-basiert auf Plunker

Wo Observables wirklich glänzen

Ändern Sie den Code so, dass der Endpunkt nicht bei jedem Tastendruck gehämmert wird, sondern nur eine Anforderung gesendet wird, wenn der Benutzer die Eingabe für 400 ms

Um solche Superkräfte zu enthüllen, benötigen wir zunächst einen Observable<string>, der den vom Benutzer eingegebenen Suchbegriff enthält. Anstatt manuell an das keyup-Ereignis zu binden, können wir die formControl-Direktive von Angular nutzen. Um diese Direktive verwenden zu können, müssen Sie zuerst die Variable ReactiveFormsModule in unser Anwendungsmodul importieren.

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 {}

Nach dem Import können wir formControl in unserer Vorlage verwenden und auf den Namen "Begriff" setzen.

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

In unserer Komponente erstellen wir eine Instanz von FormControl aus @angular/form und machen sie als Feld unter dem Namen term in unserer Komponente verfügbar.

Hinter den Kulissen macht Begriff automatisch einen Observable<string> als Eigenschaft valueChanges verfügbar, den wir abonnieren können. Nun, da wir einen Observable<string> haben, ist das Überwinden der Benutzereingabe so einfach wie das Aufrufen von debounceTime(400) auf unserer Observable. Dies gibt einen neuen Observable<string> zurück, der nur dann einen neuen Wert ausgibt, wenn für 400ms keine neuen Werte gekommen sind.

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));
  }
}

Es wäre eine Verschwendung von Ressourcen, eine weitere Anfrage nach einem Suchbegriff zu versenden, für den unsere App bereits die Ergebnisse anzeigt. Um das gewünschte Verhalten zu erreichen, müssen wir nur den Operator distinctUntilChanged aufrufen, nachdem wir debounceTime(400) aufgerufen haben.

Siehe das Beispiel der Implementierung von Observable auf Plunker

Für den Umgang mit Antworten außerhalb der Reihenfolge lesen Sie bitte den gesamten Artikel http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

Soweit ich Http in Angular verwende, stimme ich zu, dass in normalen Anwendungsfällen keine großen Unterschiede bei der Verwendung von Observable over Promise bestehen. Keiner der Vorteile ist hier in der Praxis wirklich relevant. Ich hoffe, dass ich in Zukunft einen fortgeschrittenen Anwendungsfall sehen kann :)

Mehr erfahren

• https://angular-2-training-book.rangle.io/handout/observables/
• https://angular.io/tutorial/toh-pt6#observables

Sowohl Promises als auch Observables helfen uns bei der Arbeit mit den asynchronen Funktionen in JavaScript. Sie sind in vielen Fällen sehr ähnlich, es gibt jedoch auch einige Unterschiede zwischen den beiden. Versprechungen sind Werte, die sich auf asynchronous-Art auflösen lassen, wie http -Aufrufe. Auf der anderen Seite behandeln Observables eine Folge von asynchronen Ereignissen. Die Hauptunterschiede zwischen ihnen sind unten aufgeführt:

Versprechen:

• eine Pipeline haben
• normalerweise nur bei asynchroner Datenrückgabe verwenden
• nicht leicht zu stornieren

beobachtbar:

• sind stornierbar
• sind von Natur aus abrufbar, wie Wiederholung und Wiederholung, wenn
• stream Daten in mehreren Pipelines
• array-ähnliche Operationen wie Map, Filter etc
• kann aus anderen Quellen wie Ereignissen erstellt werden
• dies sind Funktionen, die später abonniert werden können

Außerdem habe ich unten ein grafisches Bild erstellt, um die Unterschiede visuell darzustellen:

Versprechen

1. Definition: Hilft Ihnen, Funktionen asynchron auszuführen und ihre Rückgabewerte (oder Ausnahmen) zu verwenden, jedoch nur einmal , wenn sie ausgeführt werden.
2. Nicht faul
3. Nicht kündbar (Es gibt Promise-Bibliotheken, die die Kündigung unterstützen, ES6 Promise jedoch noch nicht). Die beiden möglichen Entscheidungen sind
   • Ablehnen
   • Entschlossenheit
4. Kann nicht wiederholt werden (Versprechen sollten Zugriff auf die ursprüngliche Funktion haben, die das Versprechen zurückgegeben hat, über eine Wiederholungsfunktion zu verfügen, was eine schlechte Praxis ist.)

Observables

1. Definition: Hilft Ihnen, Funktionen asynchron auszuführen und ihre Rückgabewerte bei der Ausführung in einer fortlaufenden Reihenfolge ( mehrfach ) zu verwenden.
2. Standardmäßig ist es Lazy, da es im Laufe der Zeit Werte ausgibt.
3. Hat viele Operatoren, die den Codierungsaufwand vereinfachen.

4. Ein Operator retry kann verwendet werden, um es bei Bedarf erneut zu versuchen, auch wenn die beobachtbare Variable unter bestimmten Bedingungen erneut versucht werden muss . retryWhen kann verwendet werden.

   Hinweis : Eine Liste der Operatoren mit ihren interaktiven Diagrammen finden Sie hier unter RxMarbles.com

In den Antworten fehlt ein Nachteil von Observablen. Versprechen erlauben die Verwendung der ES7-Funktionen für async/await. Mit ihnen können Sie asynchronen Code wie einen synchronen Funktionsaufruf schreiben, so dass Sie keine Rückrufe mehr benötigen. Die einzige Möglichkeit für Observables, dies zu tun, besteht darin, sie in Versprechen umzuwandeln. Wenn Sie sie jedoch in Versprechen konvertieren, können Sie wieder nur einen Rückgabewert haben:

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

Lesen Sie weiter: Wie kann ich auf ein Rx Observable "warten"?

versprechen und Observable behandeln nur den asynchronen Aufruf. find oben Bild für den Hauptunterschied.

Obwohl diese Antwort zu spät ist, habe ich die Unterschiede unten zusammengefasst:

Beobachtbar:

1. Observable ist nur eine function, die an observer verwendet und einen function Observer: an object with next, error. zurückgibt.
2. Observer erlaubt es subscribe/unsubscribe zu seinem Datenstrom, emitnext Wert an den Beobachter, notify den Beobachter über errors und Den Beobachter über den stream completion zu informieren.
3. Observer bietet einen function to handle next value, Fehler und Ende des Streams (UI-Ereignisse, http-Antworten, Daten mit Web-Sockets).
4. Funktioniert mit multiple values im Laufe der Zeit
5. Es ist cancel-able/retry-able und unterstützt Operatoren wie map,filter,reduce usw.
6. Ein Observable kann erstellt werden -Observable.create() - Gibt Observable zurück, das Methoden auf -Observer Observable.from() aufrufen kann - konvertiert ein Array oder iterable in -Observable Observable.fromEvent() - konvertiert ein event in Observable -Observable.fromPromise() - wandelt ein Promise in Observable um -Observable.range() - gibt eine Folge von ganzen Zahlen im angegebenen Bereich zurück

Versprechen:

1. Ein Versprechen stellt eine Aufgabe dar, die in der Zukunft zu Ende gehen wird. 

2. Versprechen werden resolved by a value; 

3. Versprechen werden durch Ausnahmen abgelehnt;

4. Nicht cancellable und gibt a single value zurück.

5. Ein Versprechen enthüllt eine Funktion (then) 

   -then gibt eine neue promise zurück; 

   -Läßt die attachment davon ausgeführt werden, basierend auf state; 

   -handlers sind guaranteed zur Ausführung in order attached;

Ich glaube, dass alle anderen Antworten Ihre Zweifel klären sollten ... Trotzdem wollte ich nur hinzufügen, dass Observables auf funktionaler Programmierung basieren, und ich finde die Funktionen, die damit einhergehen, wie map, flatmap, reduz, zip, sehr nützlich. Die Konsistenz, die das Web erzielt, insbesondere wenn es auf API-Anforderungen ankommt, ist eine brutale Verbesserung.

Diese Dokumentation empfehle ich dringend, da es sich um die offizielle Dokumentation von reagierendenX handelt und ich finde es am klarsten.

Wenn Sie in Observables einsteigen möchten, würde ich diesen dreiteiligen Beitrag vorschlagen: http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/

Obwohl es für RxJava gedacht ist, sind die Konzepte gleich und es ist wirklich gut erklärt. In der Dokumentation von interactiveX haben Sie die Äquivalenzen für jede Funktion. Sie müssen nach RxJS suchen.

Ich habe gerade ein Problem angesprochen, bei dem Versprechen die beste Lösung waren, und ich teile es hier für alle, die über diese Frage stolpern, falls sie nützlich ist (dies war genau die Antwort, nach der ich vorher gesucht hatte):

In einem Angular2-Projekt habe ich einen Dienst, der einige Parameter übernimmt und eine Werteliste zurückgibt, um Dropdown-Menüs in einem Formular aufzufüllen. Wenn die Formularkomponente initialisiert wird, muss ich denselben Dienst mehrmals mit verschiedenen Parametern aufrufen, um eine Reihe verschiedener Dropdown-Menüs zu definieren. Wenn ich jedoch einfach alle Variablen in die Warteschlange setze, um den Dienst aufzurufen, ist nur die letzte erfolgreich und der Restfehler aus. Das Abrufen von Diensten aus der Datenbank konnte jeweils nur eine Anforderung verarbeiten.

Die einzige Möglichkeit, alle Dropdown-Menüvariablen erfolgreich aufzufüllen, bestand darin, den Dienst so aufzurufen, dass die Verarbeitung einer neuen Anforderung bis zum Abschluss der letzten Anforderung verhindert wurde und der Promise/.then-Mechanismus das Problem gut gelöst hat.

  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;
          })  }

Ich habe die Funktionen in der Komponente definiert und dann in ngOnInit initializeDropDowns () aufgerufen.

Die Funktion fetchValueList gibt eine Promise zurück. Daher übergibt der erste Aufruf den ersten listCode. Wenn die Promise aufgelöst wird, befindet sich der Rückgabewert in der Datenvariablen im .then-Block, wo wir ihn der Variablen this.firstValList zuordnen können. Da die Funktion Daten zurückgegeben hat, wissen wir, dass der Dienst abgeschlossen ist und es mit dem zweiten listCode sicher erneut aufgerufen werden kann. Der Rückgabewert befindet sich in der Datenvariablen im nächsten .then-Block, und wir weisen ihn der Variablen this.secondValList zu.

Wir können dies so oft wie nötig verketten, um alle Variablen aufzufüllen, und im letzten Codeblock lassen wir die return-Anweisung einfach weg und der Block wird beendet.

Dies ist ein sehr spezieller Anwendungsfall, in dem wir einen einzelnen Dienst haben, der bei der Initialisierung der Komponente mehrmals aufgerufen werden muss, und in dem der Dienst seinen Abruf abschließen und einen Wert zurückgeben muss, bevor er erneut aufgerufen werden kann. In diesem Fall Die Promise-/Dann-Methode war ideal.

Versprechen:

• Geben Sie einen einzigen zukünftigen Wert an.
• Nicht faul;
• Nicht stornierbar;

Beobachtbar:

• Gibt im Laufe der Zeit mehrere Werte aus;
• Faul;
• Stornierbar;
• Unterstützt Karten-, Filter-, Reduzierungs- und ähnliche Operatoren

Sie können Versprechungen anstelle von Observablen verwenden, wenn Sie HTTP in Angular aufrufen, wenn Sie möchten.

Versprechen - Stellen Sie einen einzigen zukünftigen Wert bereit. Nicht faul . Nicht stornierbar Es wird entweder ablehnen oder auflösen.

Beobachtbar - Stellen Sie mehrere zukünftige Werte bereit. Faul . Abbestellbar Es bieten andere Methoden Live Map, Filter, reduzieren. 

Überblick:

• Sowohl Versprechen als auch Observables helfen uns bei asynchronen Vorgängen. Sie können bestimmte Rückrufe aufrufen, wenn diese asynchronen Vorgänge ausgeführt werden.
• Ein Promise kann nur ein Ereignis behandeln. Observables sind für zeitlich begrenzte Ereignisströme
• Versprechen können nicht mehr storniert werden, wenn sie noch ausstehen
• Daten, die Observables emittieren, können mithilfe von Operatoren umgewandelt werden

Sie können ein Observable immer für den Umgang mit asynchronem Verhalten verwenden, da ein Observable über alle Funktionen verfügt, die ein Versprechen bietet (+ extra). Manchmal wird diese zusätzliche Funktionalität von Observables jedoch nicht benötigt. Dann wäre es ein zusätzlicher Aufwand, eine Bibliothek dafür zu importieren, um sie verwenden zu können.

Wann werden Versprechen verwendet?

Verwenden Sie Versprechungen, wenn Sie einen asynchronen single - Vorgang haben, dessen Ergebnis Sie bearbeiten möchten. Zum Beispiel:

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

Ein Versprechen führt also Code aus, bei dem es entweder aufgelöst oder abgelehnt wird. Wenn entweder „Auflösen“ oder „Ablehnen“ aufgerufen wird, wechselt das Versprechen von einem ausstehenden Zustand zu einem Aufgelösten - oder Abgelehnt -Zustand. Wenn der Versprechungszustand gelöst ist, wird die then()-Methode aufgerufen. Wenn der Versprechungsstatus abgelehnt wird, wird die catch()-Methode aufgerufen.

Wann sind Observables zu verwenden:

Verwenden Sie Observables, wenn über die Zeit ein stream (von Daten) vorhanden ist, mit dem Sie umgehen müssen. Ein Stream ist eine Folge von Datenelementen, die im Laufe der Zeit zur Verfügung gestellt werden. Beispiele für Streams sind:

1. Benutzerereignisse, z. Klicken oder Keyup-Ereignisse. Der Benutzer generiert Ereignisse (Daten) im Laufe der Zeit.
2. Websockets, nachdem der Client eine Websocket-Verbindung zum Server hergestellt hat Er überträgt Daten im Laufe der Zeit.

In Observable selbst wird angegeben, wann das next-Ereignis aufgetreten ist, wenn ein error auftritt oder wenn das Observable complete ist. Dann können wir dieses Observable abonnieren, das es aktiviert, und in diesem Abonnement können wir 3 Callbacks übergeben (müssen nicht immer alle übergeben werden). Ein Rückruf, der für Erfolg ausgeführt werden soll, ein Rückruf für Fehler und ein Rückruf für die Fertigstellung. Zum Beispiel:

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

Beim Erstellen eines Observable wird eine Callback-Funktion benötigt, die einen Observer als Argument liefert. Bei diesem Beobachter können Sie dann onNext, onCompleted, onError aufrufen. Wenn das Observable dann abonniert wird, werden die entsprechenden Rückrufe aufgerufen, die an das Abonnement übergeben werden.

Observables und Promises bieten eine Möglichkeit, mit async -Aktivitäten in JavaScript zu arbeiten. Während Promises entweder reject/resolve basierend auf dem Abschluss eines einzelnen asynchronen Ereignisses (http-Anforderung) verspricht, können Observables fortlaufend Statusänderungen basierend auf den beobachtenden Beobachtern ausgeben. 

Ein grundlegender Unterschied zwischen ihnen besteht darin, dass die Beobachtbaren Möglichkeiten bieten, eine Anforderung abbrechen und eine neue erneut senden. Wo als Versprechen nicht solche Funktion zulassen.

Promise gibt auch einen einzelnen Wert aus, während Observable mehrere Werte ausgibt. Wenn Sie also eine HTTP-Anfrage bearbeiten, kann Promise eine einzige Antwort für dieselbe Anfrage verwalten. Was passiert, wenn mehrere Antworten auf dieselbe Anfrage vorliegen, müssen Sie Observable verwenden. 

Promise vs Observable Similarity first

1. Beide handhabten asynchronen Code.
2. Bitte suchen Sie nach Versprechen Beispiel. Promise-Konstruktor übergibt eine Auflösungsreferenzfunktion, die aufgerufen wird, wenn sie nach Abschluss einer asynchronen Aufgabe mit einem bestimmten Wert aufgerufen wird.

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

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

3. Beobachtbares Beispiel jetzt. Auch hier übergeben wir eine Funktion an observable, einen Beobachter, der die asynchrone Aufgabe übernimmt. Im Gegensatz zu Lösung im Versprechen hat es die folgende Methode und abonniert anstelle von dann.

4. Beide erledigen also asynchrone Aufgaben. Jetzt wollen wir den Unterschied sehen.

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

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

Versprechen vs. beobachtbarer Unterschied

Versprechen

1. Es löst einen einzelnen Wert auf oder lehnt ihn ab und kann jeweils einen einzelnen Wert für eine asynchrone Aufgabe verarbeiten.
2. Ein Versprechen, das den Async-Wert, den es vervollständigt, einmal aufgelöst hat, kann nicht mehr verwendet werden. Es ist nur eine einmalige Verwendung, und hier wird es unterschritten.
3. Nicht stornierbar
4. Keine rxjs-Unterstützung für Bediener.

Beobachtbar

1. möglichkeit, mehrere asynchrone Werte auszugeben.
2. Wird verwendet, um den Strom von Ereignissen oder Werten zu verarbeiten. Angenommen, Sie haben ein Array mit zahlreichen Aufgaben oder Werten, und Sie möchten, dass jeder Wert, der in dieses Feld eingefügt wird, automatisch verarbeitet wird. Jedes Mal, wenn Sie einen Wert in dieses Array übertragen, erhalten alle Abonnenten automatisch den neuesten Wert.
3. Observables sind nützlich, um Eingabeänderungen, wiederholte Intervalle, Broadcast-Werte an alle untergeordneten Komponenten, Web-Socket-Push-Benachrichtigungen usw. zu beobachten.
4. Kann jederzeit über die Abmeldemethode gekündigt werden.
5. Ein letzter guter Teil, der versprochen hat, ist die Unterstützung der rxjs-Operatoren. Sie haben viele Pipe-Operatoren, hauptsächlich Map, Filter, SwitchMap, CombinedLatest usw., um beobachtbare Daten vor dem Abonnieren zu transformieren.

Im Folgenden sind einige wichtige Unterschiede in Bezug auf Versprechen und Observables aufgeführt.

Versprechen

• Gibt nur einen einzelnen Wert aus
• Nicht stornierbar
• Nicht teilbar
• Immer asynchron

Beobachtbar

• Gibt mehrere Werte aus
• Wird nur ausgeführt, wenn es angerufen wird oder jemand abonniert
• Kann storniert werden
• Dieser gemeinsame Wert kann von mehreren Teilnehmern gemeinsam genutzt und abonniert werden. Alle Abonnenten werden zu einem bestimmten Zeitpunkt ausgeführt.
• möglicherweise asynchron

Zum besseren Verständnis lesen Sie die https://stackblitz.com/edit/observable-vs-promises

Der grundlegende Unterschied zwischen beobachtbaren und Versprechungen ist:

Die allgemein akzeptierte Antwort ist im Allgemeinen gut, aber ich denke nicht, dass sie betont, dass Sie beim Umgang mit Angular-Komponenten fast immer ein Observable verwenden möchten, da dies die Stornierung unterstützt. Versprechen können nicht storniert werden und werden auch dann gelöst, wenn Ihre Komponente zerstört wird. Angular neigt dazu, zu vergeben, bis es nicht ist. 

Beispielsweise verursacht jede manuelle Änderungserkennung einer zerstörten Komponente eine Ausnahme:

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();
  });
}

Wenn Ihre Komponente zerstört wird, bevor das Versprechen aufgelöst wird, erhalten Sie einen attempt to use destroyed view-Fehler, wenn das Versprechen gelöst wird.

Wenn Sie jedoch Observables mit dem Muster takeUntil verwenden, wird das Abonnement abgebrochen, sobald Ihre Komponente zerstört wird.

Dies ist ein kleines Beispiel, aber die Ausführung von Code für eine Komponente, die zerstört wird, führt wahrscheinlich zu Fehlern. Es sei denn, Sie möchten das aus irgendeinem Grund tatsächlich tun: p

Observables und Promises helfen uns, mit den asynchronen Funktionen von JavaScript/TypeScript zu arbeiten. Sie sind in vielen Fällen sehr ähnlich, es gibt jedoch immer noch Unterschiede.

Kurze Antwort :

Beobachtbar istbesser, es hat alle Versprechen Funktionen plus zusätzliche Funktionen. 

Lange Antwort:  

Versprechen:

• Einmalige Verwendung "Daten einmal zurückgeben" 
• Keine stornierung 
• Ein Zuhörer
• Kein Sockel unterstützt einen Listener

Beobachtbar:

• Daten oft zurückgeben, wenn sich Daten ändern
• Support abbrechen 
• Stützsteckdose
• Unterstützen Sie viele Listener und benachrichtigen Sie sie, wenn sich Daten ändern
• Karte unterstützen, filtern, reduzieren

Ich sehe viele Leute, die das Argument verwenden, dass Observable "stornierbar" ist, aber es ist ziemlich trivial, Promise "stornierbar" zu machen.

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

Versprechen:

Asynchrone Ereignisbehandlungsroutine - Das Promise-Objekt repräsentiert den endgültigen Abschluss (oder Fehler) einer asynchronen Operation und den daraus resultierenden Wert.

Syntax: new Promise (Testamentsvollstrecker);

zB:

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);

About Promise: Es hat eine Pipeline, daher gibt es Werte nur einmal zurück, wenn es aufgerufen wird. Der so genannte One-Way-Handler kann möglicherweise nicht storniert werden. nützliche Syntax zum Herumspielen, when () und then ()

Observables:

Observables sind langsame Sammlungen mit mehreren Werten im Zeitverlauf. Es ist wirklich ein großartiger Ansatz für asynchrone Operationen. es kann mit rxjs gemacht werden, das plattformübergreifende Unterstützung hat, kann mit eckigen/reagieren usw.

es wirkt wie ein Stream Liner. kann Multi-Pipeline sein. Sobald dies definiert ist, können Sie es abonnieren, um an vielen Stellen Ergebnisse zu erhalten.

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

Rx.Observable.fromEvent(button, "click"),
Rx.Subject()

usw

zu abonnieren: RxLogger.getInstance();

zB:

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));

da es Multi-Pipeline unterstützt, können Sie das Ergebnis an einem anderen Ort abonnieren,   es hat viele möglichkeiten als versprechen.

Verwendung: es hat mehr Möglichkeiten wie map, filter, pipe, map, concatMap etc

Etwas, auf das ich gestoßen bin, war aus der ersten Lektüre des Tutorials nicht ersichtlich, und die Dokumentation war die Idee des Multicasting.

Stellen Sie sicher, dass Sie wissen, dass standardmäßig mehrere Abonnements mehrere Ausführungen in einem Observable auslösen. Mehrere Subskriptionen für einen einzelnen HTTP-Aufruf Observable löst mehrere identische HTTP-Aufrufe aus, sofern Sie nicht .share() (Multicasting aktivieren).

Ein Versprechen zwingt Sie, sich jeweils mit einer Sache zu befassen, ihre Daten auszupacken, Ausnahmen zu behandeln, Sprachunterstützung für coole Dinge wie async/await zu erhalten und ist ansonsten ziemlich barebones.

Ein Observable hat viele Glocken und Pfeifen, aber Sie müssen wissen, mit welcher Kraft Sie arbeiten, oder es kann missbraucht werden.

Sowohl Promises als auch Observables helfen uns beim Umgang mit asynchronen Operationen. Sie können bestimmte Rückrufe aufrufen, wenn diese asynchronen Vorgänge ausgeführt werden.

Angular verwendet Observables von RxJS anstelle von Versprechungen für den Umgang mit HTTP

Below are some important differences in promises & Observables.