Hem Promisesve Observablesbizi başa yardımıyla bu soyutlama bize asenkron bizim uygulamaların doğası. Aralarındaki fark @ Günter ve @Relu tarafından açıkça belirtildi.
Bir kod pasajı bin kelimeye bedel olduğundan, bunları daha kolay anlamak için aşağıdaki örneği inceleyelim.
@Christoph Burgdorf harika makale için teşekkürler
Açısal, HTTP ile ilgili vaat yerine Rx.js Gözlemlenebilir kullanır.
Siz yazarken sonuçları anında göstermesi gereken bir arama işlevi oluşturduğunuzu varsayalım . Kulağa tanıdık geliyor, ancak bu görevle ilgili birçok zorluk var.
- Kullanıcı bir tuşa her bastığında sunucu uç noktasına vurmak istemiyoruz;
HTTP . Temel olarak, yalnızca kullanıcı her tuş vuruşu yerine yazmayı bıraktığında vurmak istiyoruz.
- Arama bitiş noktasına aynı sorgu parametreleriyle vurmayınSonraki istekler için .
- Sıra dışı yanıtlarla ilgilenin. Uçuş sırasında aynı anda birden fazla isteğimiz olduğunda, beklenmedik sırada geri geldikleri durumları hesaba katmalıyız. Önce bilgisayar yazdığımızı, durduğumuzu , bir istek bittiğini, araba yazdığımızı, durduğumuzu, bir isteğin gittiğini hayal edin . Şimdi uçuşta iki isteğimiz var. Ne yazık ki, sonuçlarını taşıyan istek bilgisayarın sonuçlarını taşıyan istekten sonra geri gelir arabaya .
Demo sadece iki dosyadan oluşacaktır: app.tsve wikipedia-service.ts. Gerçek dünya senaryosunda, büyük olasılıkla işleri daha da bölebiliriz.
Aşağıda açıklanan uç durumların hiçbirini ele almayan Söz tabanlı uygulama yer almaktadır.
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]);
}
}
Belirli bir arama terimiyle Wikipedia API'sına istekte bulunmak için Jsonphizmeti enjekte ediyoruz . A noktasından a noktasına gitmek için aradığımız dikkat edin . Sonunda arama yöntemimizin dönüş türü olarak a ile sonuçlanır.GETtoPromiseObservable<Response>Promise<Response>Promise<Array<string>>
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);
}
}
Burada da pek bir sürpriz yok. Bizim için WikipediaServicebir arama yöntemi kullanarak işlevselliğini enjekte edip ortaya koyarız. Şablon sadece tuşlara ve çağrılara bağlanırsearch(term.value) .
Biz sonucunu ambalajından Promise WikipediaService getiri arama yöntemi ve sahip böylece şablona dizeleri basit Array olarak maruz olduğunu*ngFor içinden döngü ve bizim için bir liste oluşturmak.
Örneğini inceleyin Promise tabanlı üzerinde uygulanması Plunker
Nerede Gözlenebilirler gerçekten parlamaya
Her tuş vuruşunda uç noktayı kırmamak için kodumuzu değiştirelim, bunun yerine yalnızca kullanıcı 400 ms yazmayı bıraktığında bir istek gönderelim
Bu tür süper güçleri açığa çıkarmak için önce Observable<string>kullanıcının yazdığı arama terimini taşıyan bir tane almamız gerekir . Keyup olayına manuel olarak bağlanmak yerine Angular formControlyönergesinden yararlanabiliriz. Bu yönergeyi kullanmak için, öncelikle ReactiveFormsModuleuygulama modülümüze aktarmamız gerekir.
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 {}
İçe aktarıldıktan sonra, şablonumuzdan formControl'ü kullanabilir ve "terim" adına ayarlayabiliriz.
<input type="text" [formControl]="term"/>
Bizim bileşeni olarak, bir örneğini oluşturmak FormControldan@angular/form ve bizim bileşeni üzerinde isim terimi altında bir alan olarak maruz kalmaktadır.
Perde arkasında, terim otomatik Observable<string>olarak valueChangesabone olabileceğimiz bir özellik olarak ortaya çıkarır . Artık bir Observable<string>, kullanıcı girişinin üstesinden gelmek debounceTime(400)bizim telefonumuzu aramak kadar kolay Observable. Bu, Observable<string>yalnızca 400 ms boyunca yeni değerler gelmediğinde yeni bir değer yayan bir yeni döndürür .
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));
}
}
Uygulamamızın zaten sonuçları gösterdiği bir arama terimi için başka bir istek göndermek kaynak kaybı olacaktır. İstenen davranışı elde etmek için tek yapmamız gereken, distinctUntilChangedaradıktan hemen sonra operatörü aramaktır.debounceTime(400)
Örneğini inceleyin gözlemlenebilir üzerinde uygulanması Plunker
Sıra dışı yanıtlarla uğraşmak için lütfen http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html makalenin tamamını inceleyin.
Http'yi Angular'da kullandığım sürece, normal kullanım durumlarında Promise over Promerv'ı kullanırken çok fazla fark olmadığını kabul ediyorum. Avantajların hiçbiri burada pratikte gerçekten alakalı değildir. Umarım gelecekte bazı gelişmiş kullanım durumlarını görebilirim :)
Daha fazla bilgi edin
