Beides Promisesund Observablesliefert uns Abstraktionen, die uns helfen, mit der Asynchronität unserer Anwendungen umzugehen . Der Unterschied zwischen ihnen wurde von @ Günter und @Relu deutlich herausgestellt.
Da ein Code-Snippet mehr als tausend Wörter enthält, lesen Sie das folgende Beispiel, um sie leichter 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 eine Suchfunktion , die Ihnen während der Eingabe sofort Ergebnisse anzeigt. Klingt vertraut, aber mit dieser Aufgabe sind viele Herausforderungen verbunden.
- Wir möchten den Serverendpunkt nicht jedes Mal erreichen, wenn der Benutzer eine Taste drückt. Er sollte ihn mit einem Sturm von
HTTPAnforderungen überfluten . Grundsätzlich wollen wir es nur treffen, wenn der Benutzer aufgehört hat zu tippen, anstatt bei jedem Tastendruck.
- Treffen Sie den Suchendpunkt nicht mit denselben Abfrageparametern für nachfolgende Anforderungen.
- Behandeln Sie nicht ordnungsgemäße Antworten. Wenn mehrere Anfragen gleichzeitig im Flug sind, müssen wir Fälle berücksichtigen, in denen sie in unerwarteter Reihenfolge zurückkommen. Stellen Sie sich vor, wir tippen zuerst Computer , stoppen, eine Anfrage geht aus, wir tippen Auto , stoppen, eine Anfrage geht aus. Jetzt haben wir zwei Anfragen im Flug. Leider kommt die Anfrage, die die Ergebnisse für den Computer enthält, nach der Anfrage zurück, die die Ergebnisse für das Auto enthält .
Die Demo besteht einfach aus zwei Dateien: app.tsund wikipedia-service.ts. In einem realen Szenario würden wir die Dinge jedoch höchstwahrscheinlich weiter aufteilen.
Im Folgenden finden Sie eine Promise-basierte Implementierung, die keinen der beschriebenen Randfä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 JsonpService, um eine GETAnfrage gegen die Wikipedia-API mit einem bestimmten Suchbegriff zu stellen. Beachten Sie, dass wir anrufen toPromise, um von a Observable<Response>nach a zu gelangen Promise<Response>. Am Ende erhalten Sie einen Promise<Array<string>>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 WikipediaServiceund stellen ihre Funktionalität über eine Suchmethode der Vorlage zur Verfügung. Die Vorlage wird einfach an Keyup und Aufrufe gebundensearch(term.value) .
Wir packen das Ergebnis des Versprechens aus, dass die Suchmethode des WikipediaService zurückgegeben wird, und machen es als einfaches Array von Zeichenfolgen für die Vorlage verfügbar, damit wir es *ngFordurchlaufen und eine Liste für uns erstellen können.
Siehe das Beispiel einer Promise-basierten Implementierung in Plunker
Wo Observables wirklich glänzen
Lassen Sie uns unseren Code so ändern, dass der Endpunkt nicht bei jedem Tastendruck gehämmert wird, sondern nur dann eine Anfrage gesendet wird, wenn der Benutzer 400 ms lang aufgehört hat zu tippen
Um solche Superkräfte zu enthüllen, benötigen wir zunächst einen Observable<string>, der den Suchbegriff enthält, den der Benutzer eingibt. Anstatt manuell an das Keyup-Ereignis zu binden, können wir die Angular- formControlDirektive nutzen. Um diese Direktive zu verwenden, müssen wir sie zuerst ReactiveFormsModulein 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 aus unserer Vorlage heraus verwenden und auf den Namen "term" setzen.
<input type="text" [formControl]="term"/>
In unserer Komponente erstellen wir eine Instanz von FormControlfrom @angular/formund machen sie als Feld unter dem Namensbegriff unserer Komponente verfügbar.
Hinter den Kulissen macht term automatisch eine Observable<string>as-Eigenschaft valueChangesverfügbar, die wir abonnieren können. Jetzt, da wir eine haben Observable<string>, ist die Überwindung der Benutzereingaben so einfach wie das Aufrufen debounceTime(400)unserer Observable. Dies gibt Observable<string>einen neuen Wert zurück, der nur dann einen neuen Wert ausgibt, wenn seit 400 ms keine neuen Werte mehr vorliegen.
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 senden, für den unsere App bereits die Ergebnisse anzeigt. Alles, was wir tun müssen, um das gewünschte Verhalten zu erreichen, ist, den distinctUntilChangedOperator direkt nach dem Anruf anzurufendebounceTime(400)
Siehe das Beispiel der Observable- Implementierung in Plunker
Informationen zu nicht ordnungsgemäßen Antworten finden Sie im vollständigen Artikel
http://blog.ehowtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
Soweit ich HTTP in Angular verwende, stimme ich zu, dass es in den normalen Anwendungsfällen keinen großen Unterschied gibt, wenn Observable over Promise verwendet wird. Keiner der Vorteile ist hier in der Praxis wirklich relevant. Hoffe, ich kann in Zukunft einen fortgeschrittenen Anwendungsfall sehen :)
Erfahren Sie mehr
