Versprechen gegen beobachtbar

Versprechen

Einen Promise verarbeitet einzelnes Ereigniswenn eine asynchrone operation abgeschlossen wird oder fehlschlägt.

Hinweis: Es gibt Promise Bibliotheken gibt, die Unterstützung Stornierung, aber ES6 Promise nicht so weit.

Beobachtbaren

Einer Observable ist wie ein Stream (in vielen Sprachen) und ermöglicht die übergabe von null oder mehr Ereignisse, bei denen der callback wird aufgerufen, für jedes Ereignis.

Oft Observable ist bevorzugt über Promise weil es bietet Ihnen die Funktionen von Promise und mehr. Mit Observable ist es egal, ob Sie möchten, um zu behandeln, 0, 1, oder mehrere Ereignisse. Sie können verwenden die gleiche API in jedem Fall.

Observable hat auch den Vorteil, über Promise werden stornierbar. Wenn das Ergebnis einer HTTP-Anfrage an einen server oder eine andere teure async operation ist nicht mehr nötig, die Subscription einer Observable ermöglicht, das Abonnement zu kündigen, während eine Promise wird schließlich rufen Sie den Erfolg "oder" fehlgeschlagen Rückruf, auch wenn Sie nicht brauchen, die Mitteilung oder das Ergebnis, es bietet mehr.

Beobachtbaren bietet Betreiber wie mapforEachreduce... ähnlich wie ein array

Gibt es auch mächtige Operatoren wie retry() oder replay()... das sind oft ganz praktisch.

InformationsquelleAutor der Antwort Günter Zöchbauer

Beide Promises und Observables uns mit Abstraktionen, die uns helfen, befassen sich mit der asynchrone Natur unserer Anwendungen. Der Unterschied zwischen Ihnen war, deutete eindeutig durch @Günter und @aufgrund der Kr.

Da ein code-snippet, das ist mehr Wert als tausend Worte, lassen Sie uns gehen Sie durch das folgende Beispiel zu verstehen, Sie leichter.

Danke @Christoph Burgdorf für das tolle Artikel

Winkel verwendet Rx.js Observablen anstelle der Versprechen, die für den Umgang mit HTTP.

Angenommen, Sie bauen eine Suchfunktion , sollte sofort zeigen Sie die Ergebnisse während der Eingabe. Klang vertraut, aber es gibt eine Menge von Herausforderungen, die sich mit dieser Aufgabe.

• Wollen wir nicht zu schlagen, die server-Endpunkt jedes mal, wenn Benutzer eine Taste drückt, sollte es überschwemmen Sie mit einem Sturm von HTTP Anfragen. Im Grunde wollen wir nur schlagen, sobald der Benutzer aufgehört hat, die Eingabe statt mit jedem Tastenanschlag.
• Nicht auf der Suche Endpunkt mit der gleichen query params für nachfolgende Anfragen.
• Deal mit out-of-order-Antworten. Wenn wir mehrere Anfragen von in-flight in der gleichen Zeit, die wir berücksichtigen müssen, für die Fälle, wo kommen Sie wieder in unerwarteten Reihenfolge. Man Stelle sich vor wir zuerst geben computerzu stoppen, ist eine Anfrage raus geht, geben wir Autozu stoppen, ist eine Anfrage raus geht. Jetzt haben wir zwei Anfragen im Flug. Leider ist die Anfrage trägt die Ergebnisse für computer zurück kommt, nachdem die Anforderung führt, dass die Ergebnisse für Auto.

Die demo wird einfach aus zwei Dateien: app.ts und wikipedia-service.ts. In einem realen Szenario würden wir wahrscheinlich aufteilen, Dinge weiter oben, obwohl.

Unten ist Versprechen-basierend Umsetzung, nicht der Griff einer der beschriebenen Sonderfälle.

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

Sind wir die Injektion der Jsonp service, um einen GET Antrag gegen die Wikipedia-API mit einem bestimmten Suchbegriff. Beachten Sie, dass wir nennen toPromise um von einem Observable<Response> zu einem Promise<Response>. Schließlich am Ende mit einem Promise<Array<string>> als Rückgabe-Typ der unsere such-Methode.

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

Nicht viel von einer überraschung, die hier entweder. Wir Spritzen unsere WikipediaService aussetzen und seine Funktionalität über eine such-Methode, um die Vorlage. Die Vorlage einfach an sich bindet keyup und fordert search(term.value).

Wir packen das Ergebnis der Versprechendass die Suche-Methode der WikipediaService zurück und setzen Sie es als ein einfaches Array von strings die zu der Vorlage, so dass wir *ngFor Schleife durch und bauen Sie eine Liste für uns.

Siehe das Beispiel von Versprechen-basierend Umsetzung auf Plunker

Wo Observablen wirklich glänzen

Ändern wir unseren code nicht hammer der Endpunkt mit jedem Tastendruck, sondern nur eine Anfrage senden, wenn der Benutzer beendet die Eingabe für 400 ms

Enthüllen solchen super-Kräfte, die wir zunächst brauchen, um eine Observable<string> führt, dass die Suche Begriff, den der Benutzer eingibt. Statt manuell die Bindung an das keyup-Ereignis, wir können den Vorteil von Angular ist formControl Richtlinie. Diese Direktive zu verwenden, müssen wir zunächst importieren Sie die ReactiveFormsModule in unserer application-Modul.

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

Einmal importiert, können wir formControl innerhalb unserer Vorlage und legen Sie es auf den Namen "Begriff".

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

In unserer Komponente, erstellen wir eine Instanz von FormControl aus @angular/form und setzen Sie es als ein Feld unter dem Namen Begriff auf unsere Komponente.

Hinter den kulissen, Begriff automatisch stellt eine Observable<string> als Eigentum valueChanges dass wir abonnieren können. Jetzt haben wir eine Observable<string> überwindung der Benutzer die Eingabe so einfach wie das aufrufen debounceTime(400) auf unserer Observable. Dann kommt wieder eine neue Observable<string> wird nur emittieren einen neuen Wert, wenn es nicht kommen neue Werte für 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));
  }
}

Wäre es eine Verschwendung von Ressourcen zu senden, eine weitere Anforderung für einen Suchbegriff, die unsere app schon zeigt die Ergebnisse für. Alle haben wir zu tun, um das gewünschte Verhalten zu nennen, die distinctUntilChanged Betreiber Recht, nachdem wir aufgerufen debounceTime(400)

Siehe das Beispiel von Beobachtbaren Umsetzung auf Plunker

Für den Umgang mit out-of-order-Antworten, bitte überprüfen Sie den vollständigen Artikel
http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

Soweit ich es über Http im Winkel, ich bin damit einverstanden, dass in der normalen Fällen gibt es nicht viel Unterschied bei der Verwendung von Beobachtbaren über Versprechen. Keine der Vorteile wirklich relevant sind hier in der Praxis. Ich hoffe, ich kann sehen, einige erweiterte use-case in der Zukunft 🙂

Erfahren Sie mehr

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

InformationsquelleAutor der Antwort trungk18

Verspricht

1. Definition : Hilft Ihnen, Funktionen asynchron ausführen und deren Rückgabewerte (oder Ausnahmen), aber nur einmalwenn Sie ausgeführt werden.
2. Nicht Faul
3. Nicht kündbar. Die beiden möglichen Entscheidungen sind
   • Ablehnen
   • Beheben
4. Nicht wiederholt(Verspricht Zugriff auf die ursprüngliche Funktion zurückgegeben, die Versprechen, um die einen wiederholen-Funktion, die eine schlechte Praxis)

Observablen

1. Definition : Hilft Ihnen, Funktionen asynchron ausführen und deren Rückgabewerte in einer durchgehenden Sequenz(mehrfach), wenn Sie ausgeführt werden.
2. Standardmäßig ist Faul, so emittiert es Werten, wenn die Zeit fortschreitet.
3. Hat eine Menge Betreiber, die vereinfacht den Programmieraufwand.

4. Einem Betreiber wiederholen kann verwendet werden, zu wiederholen, Wann immer nötig, auch wenn wir brauchen, um erneut zu beobachten, basierend auf bestimmten Bedingungen retryWhen verwendet werden kann.

   Hinweis: Eine Liste mit Operatoren zusammen mit Ihrer interaktiven Diagrammen verfügbar ist hier bei RxMarbles.com

InformationsquelleAutor der Antwort Aravind

Ich bin ein Bilder Kerl, dieser fehlte in den anderen Antworten:

InformationsquelleAutor der Antwort ishandutta2007

Obwohl diese Antwort ist spät, habe ich eine Zusammenfassung der Unterschiede unten,

Beobachten:

1. Beobachtbar ist nur ein function , nimmt an observer und gibt einen function Observer: an object with next, error.
2. Beobachter erlaubt subscribe/unsubscribe zu seinen Daten-stream, emittieren
   nächste Wert der Beobachter, notify der Beobachter über errors und
   informieren den Betrachter über die stream completion
3. Beobachter bietet eine function to handle next value,Irrtümer und
   das Ende des Stroms(ui-events,http-Antworten,Daten mit web sockets).
4. Arbeitet mit multiple values im Laufe der Zeit
5. Es ist cancel-able/retry-able und unterstützt Operatoren wie map,filter,reduce etc.
6. Erstellen einer Beobachten können
   -Observable.create() - Renditen Beobachtbar ist, können Methoden aufgerufen werden, die auf
   -Observer Observable.from() - konvertiert ein array oder iterierbar in
   -Observable Observable.fromEvent() - konvertiert ein Ereignis zu Beobachten
   -Observable.fromPromise() - konvertiert ein Versprechen in die Beobachtbare
   -Observable.range() - gibt eine Sequenz von ganzen zahlen in dem angegebenen Bereich

Versprechen:

1. Ein Versprechen stellt eine Aufgabe, die wird fertig in die Zukunft;

2. Verspricht sich resolved by a value;

3. Verspricht abgelehnt bekommen von Ausnahmen;

4. Nicht cancellable und es gibt a single value

5. Ein Versprechen über eine Funktion (then)

   -gibt dann eine neue promise;

   -ermöglicht die attachment der, der ausgeführt wird, basierend auf
   state;

   -handlers sind guaranteedum auszuführen,order attached;

InformationsquelleAutor der Antwort Sajeetharan

Ich habe gerade behandelt ein Thema, wo die Versprechungen waren die beste Lösung, und ich Teile es hier für alle stolpern über diese Frage in der Veranstaltung ist es nützlich, (das war genau die Antwort die ich suchte früher):

In einem Angular2 Projekt habe ich einen service an, einige Parameter und gibt einen Wert zurück Liste zu füllen drop-down-Menüs in einem Formular. Wenn die form-Komponente initialisiert wurde, muss ich anrufen die den gleichen Dienst mehrere Male mit verschiedenen Parametern zu definieren, die eine Reihe von verschiedenen dropdown-Menüs, aber wenn ich einfach Warteschlange, bis alle Variablen, die zum Aufruf des Dienstes, nur die Letzte erfolgreich abgeschlossen, und die restlichen Fehler aus. Der service abrufen aus der Datenbank könnte nur mit einem Antrag zu einem Zeitpunkt.

Der einzige Weg, um erfolgreich zu bevölkern, die alle dropdown-Menü Variablen war ein Telefonat mit dem service in einer Weise, die verhindert, dass eine neue Anfrage bearbeitet wird, bis die Letzte Anforderung beendet wurde, und die Versprechen /.dann Mechanismus, der das problem schön.

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

Definierte ich die Funktionen in die Komponente, und dann rief initializeDropDowns() in ngOnInit.

Den fetchValueList Funktion gibt ein Versprechen, so der erste Aufruf übergibt die ersten listCode und wenn das Versprechen aufgelöst wird, ist der Rückgabewert wird in die variable Daten .dann blockieren Sie, wo wir können ordnen Sie die diese.firstValList variable. Die Funktion hat Daten zurückgegeben, wir wissen, dass der service abgeschlossen ist und es sicher wieder anrufen, mit der zweiten listCode, ist der Rückgabewert in der variable Daten in die nächste .dann blockieren Sie und wir weisen Sie der.secondValList variable.

Können wir diese Kette so oft wie erforderlich, um füllen Sie alle Variablen, und die Letzte code-block, die wir einfach weglassen, die return-Anweisung und der block wird beendet.

Dies ist ein sehr spezieller Anwendungsfall, in dem wir einen einzigen Dienst muss mehrmals aufgerufen werden, wenn die Komponente initialisiert, und wo der service zu vervollständigen Holen und einen Wert zurückgeben, bevor Sie erneut aufgerufen werden kann, aber in diesem Fall, das Versprechen /.dann war die Methode ideal.

InformationsquelleAutor der Antwort Stephen R. Smith

Versprechen:

• Liefern einen einzelnen Wert in der Zukunft;
• Nicht faul;
• Nicht kündbar;

Beobachtbar ist:

• Strahlt mehrere Werte im Laufe der Zeit;
• Faul;
• Kündbar;
• Unterstützt map, filter, reduce und ähnliche Betreiber

Die Sie verwenden können, verspricht stattdessen der observablen beim Aufruf von HTTP in Eckigen wenn Sie es wünschen.

InformationsquelleAutor der Antwort Iosua Sipos

Gibt es viele Antworten zu diesem Thema bereits, so würde ich nicht hinzufügen, eine redundant.

Aber für jemanden, der gerade angefangen zu lernen, Beobachtbaren /Winkel und Wunder, die man zu nutzen vergleichen mit Versprechenich würde empfehlen, Sie halten alles, was Beobachtbar und konvertieren Sie alle vorhandenen Verspricht in Ihrem Projekt zu Beobachten.

Einfach, weil Eckige Rahmen sich selbst und die Gemeinschaft aller mit zu Beobachten. Es wäre also vorteilhaft, wenn die Integration framework-Dienste oder 3rd-party-Module und Verkettung alles zusammen.

InformationsquelleAutor der Antwort Xinan