Zarówno Promisesi Observablesdostarczyć nam abstrakcjami, które pomagają nam radzić sobie z asynchronicznym naturę naszych aplikacji. Różnicę między nimi wyraźnie wskazali @ Günter i @Relu.
Ponieważ fragment kodu jest wart tysiąca słów, przejrzyj poniższy przykład, aby je łatwiej zrozumieć.
Dzięki @Christoph Burgdorf za wspaniały artykuł
Angular używa Rx.js Observables zamiast obietnic do obsługi HTTP.
Załóżmy, że budujesz funkcję wyszukiwania, która powinna natychmiast wyświetlać wyniki podczas pisania. Brzmi znajomo, ale z tym zadaniem wiąże się wiele wyzwań.
- Nie chcemy trafić na punkt końcowy serwera za każdym razem, gdy użytkownik naciśnie klawisz, powinien zalać go burzą
HTTP żądań. Zasadniczo chcemy go nacisnąć tylko wtedy, gdy użytkownik przestanie pisać zamiast z każdym naciśnięciem klawisza.
- Nie trafiaj punktu końcowego wyszukiwania za pomocą tych samych parametrów zapytania dla kolejnych żądań.
- Radzenie sobie z reakcjami poza kolejnością. Gdy mamy wiele żądań w locie w tym samym czasie, musimy uwzględnić przypadki, w których wracają w nieoczekiwanej kolejności. Wyobraźmy sobie, że najpierw wpisujemy komputer , zatrzymujemy się, żądanie gaśnie, wpisujemy samochód , zatrzymujemy się, żądanie gaśnie. Teraz mamy dwa żądania podczas lotu. Niestety żądanie, które przenosi wyniki dla komputera, wraca po żądaniu, które przenosi wyniki dla samochodu .
Demo będzie się po prostu składało z dwóch plików: app.tsi wikipedia-service.ts. Jednak w prawdziwym świecie najprawdopodobniej podzielilibyśmy rzeczy dalej.
Poniżej znajduje się implementacja oparta na obietnicach , która nie obsługuje żadnego z opisanych przypadków krawędzi.
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]);
}
}
Wstrzykiwamy Jsonpusługę, aby zgłosić GETżądanie przeciwko API Wikipedii przy użyciu określonego wyszukiwanego hasła. Zauważ, że my nazywamy toPromisew celu uzyskania od Observable<Response>Do Promise<Response>. Ostatecznie otrzymamy Promise<Array<string>>jako typ zwrotu naszej metody wyszukiwania.
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);
}
}
Tu też nie ma niespodzianki. Wstrzykiwamy naszą WikipediaServicei udostępniamy jej funkcjonalność za pomocą metody wyszukiwania do szablonu. Szablon po prostu wiąże się z keyup i wywołaniamisearch(term.value) .
Rozpakowujemy wynik obietnicy, że metoda wyszukiwania WikipediaService zwraca i udostępniamy szablonowi jako prostą tablicę ciągów, abyśmy mogli mieć*ngFor go przejrzeć i stworzyć dla nas listę.
Zobacz przykład implementacji opartej na obietnicach w firmie Plunker
Gdzie obserwatorzy naprawdę świecą
Zmieńmy nasz kod, aby nie wbijał punktu końcowego przy każdym naciśnięciu klawisza, ale zamiast tego wysyłał żądanie tylko wtedy, gdy użytkownik przestał pisać na 400 ms
Aby odsłonić takie super moce, najpierw musimy uzyskać taki, Observable<string>który zawiera wyszukiwane hasło, które wpisuje użytkownik. Zamiast ręcznego wiązania się ze zdarzeniem keyup, możemy skorzystać z formControldyrektywy Angulara . Aby skorzystać z tej dyrektywy, musimy najpierw zaimportować ją ReactiveFormsModuledo naszego modułu aplikacji.
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 {}
Po zaimportowaniu możemy użyć formControl z naszego szablonu i nadać mu nazwę „term”.
<input type="text" [formControl]="term"/>
W naszym komponencie tworzymy instancję FormControlz@angular/form i udostępniamy ją jako pole pod nazwą terminu na naszym komponencie.
Za kulisami termin automatycznie ujawnia Observable<string>właściwość as valueChanges, którą możemy subskrybować. Teraz, gdy mamy Observable<string>, pokonanie danych wejściowych użytkownika jest tak proste, jak wywołanie debounceTime(400)naszego Observable. Zwróci to nową Observable<string>, która wyemituje nową wartość tylko wtedy, gdy nie pojawią się nowe wartości przez 400 ms.
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));
}
}
Stratą zasobów byłoby wysłanie kolejnej prośby o wyszukiwany termin, dla którego nasza aplikacja już pokazuje wyniki. Wszystko, co musimy zrobić, aby osiągnąć pożądane zachowanie, to zadzwonić do distinctUntilChangedoperatora zaraz po tym, jak zadzwoniliśmydebounceTime(400)
Zobacz przykład Obserwowalnej implementacji na Plunkerze
Aby poradzić sobie z odpowiedziami na zamówienie, sprawdź pełny artykuł
http://blog.thoughtram.io/angular/2016/01/06/taking-oughage-of-observables-in-angular2.html
O ile używam Http w Angular, zgadzam się, że w normalnych przypadkach użycia nie ma dużej różnicy przy użyciu Observable over Promise. Żadna z zalet nie ma tu tak naprawdę znaczenia w praktyce. Mam nadzieję, że zobaczę jakiś zaawansowany przypadek użycia w przyszłości :)
Ucz się więcej
