Şimdi, üç bağlantımın olduğu bir başlangıç sayfam var. Son 'arkadaşlar' bağlantısına tıkladığınızda, uygun arkadaşlar Bileşeni başlatılır. Orada, Friends.json dosyasına dizilmiş arkadaşlarımın listesini almak/getirmek istiyorum. Şimdiye kadar her şey iyi çalışıyor. Ama ben hala RxJs'in observables, map, subscribe konseptini kullanan angular2'nin HTTP servisi için bir acemiyim. Bunu anlamaya çalıştım ve birkaç makale okudum ama pratik çalışmaya başlayana kadar bu kavramları tam olarak anlayamayacağım.
Burada HTTP ile ilgili işler dışında çalışan plnkr'yi zaten yaptım.
myfriends.ts
import {Component,View,CORE_DIRECTIVES} from 'angular2/core';
import {Http, Response,HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';
@Component({
template: `
<h1>My Friends</h1>
<ul>
<li *ngFor="#frnd of result">
{{frnd.name}} is {{frnd.age}} years old.
</li>
</ul>
`,
directive:[CORE_DIRECTIVES]
})
export class FriendsList{
result:Array<Object>;
constructor(http: Http) {
console.log("Friends are being called");
// below code is new for me. So please show me correct way how to do it and please explain about .map and .subscribe functions and observable pattern.
this.result = http.get('friends.json')
.map(response => response.json())
.subscribe(result => this.result =result.json());
//Note : I want to fetch data into result object and display it through ngFor.
}
}
Lütfen doğru şekilde yönlendirin ve açıklayın. Bunun birçok yeni geliştirici için çok faydalı olacağını biliyorum.
İşte yanlış yaptığınız yer:
this.result = http.get('friends.json')
.map(response => response.json())
.subscribe(result => this.result =result.json());
Öyle olmalı:
http.get('friends.json')
.map(response => response.json())
.subscribe(result => this.result =result);
veya
http.get('friends.json')
.subscribe(result => this.result =result.json());
İki hata yaptınız:
1- Gözlemlenebilirin kendisini this.result
dosyasına atamışsınız. Aslında arkadaş listesini this.result
a atamak istediğinizde. Bunu yapmanın doğru yolu şudur:
gözlemlenebilire abone olursunuz. .subscribe`, gözlemlenebiliri gerçekten çalıştıran işlevdir. Aşağıdaki gibi üç geri arama parametresi alır:
.subscribe(success, failure, complete);
Örneğin:
.subscribe(
function(response) { console.log("Success Response" + response)},
function(error) { console.log("Error happened" + error)},
function() { console.log("the subscription is completed")}
);
Genellikle, sonuçları başarı geri çağrısından alır ve değişkeninize atarsınız.
hata geri çağrısı kendini açıklayıcıdır.
complete geri çağrısı, son sonuçları hatasız olarak aldığınızı belirlemek için kullanılır.
Plunker'ınızda, complete callback her zaman başarı veya hata callback'inden sonra çağrılacaktır.
2- İkinci hata, .map(res => res.json())
üzerinde .json()
çağırdınız, sonra gözlemlenebilirin başarı geri çağrısında tekrar çağırdınız.
.map()bir dönüştürücüdür ve sonucu, success callback'e aktarılmadan önce döndürdüğünüz şeye (sizin durumunuzda
.json()`) dönüştürür
ikisinden birini bir kez aramalısınız.
Concepts
Gözlemlenebilirler kısaca eşzamansız işleme ve olayları ele alır. Sözler ile karşılaştırıldığında bu, gözlemlenebilirler = sözler + olaylar olarak tanımlanabilir.
Gözlemlenebilirlerin harika yanı tembel olmaları, iptal edilebilmeleri ve içlerine bazı operatörler uygulayabilmenizdir (map
, ... gibi). Bu, asenkron şeyleri çok esnek bir şekilde ele almanızı sağlar.
Gözlemlenebilirlerin gücünü en iyi şekilde açıklayan harika bir örnek, bir filtre girişini karşılık gelen filtrelenmiş bir listeye bağlamanın yoludur. Kullanıcı karakter girdiğinde liste yenilenir. Gözlemlenebilirler, ilgili AJAX isteklerini ele alır ve girdideki yeni değer tarafından başka bir istek tetiklenirse devam eden önceki istekleri iptal eder. İşte ilgili kod:
this.textValue.valueChanges
.debounceTime(500)
.switchMap(data => this.httpService.getListValues(data))
.subscribe(data => console.log('new list values', data));
(textValue
filtre girişi ile ilişkili kontroldür).
İşte bu tür bir kullanım durumunun daha geniş bir açıklaması: https://stackoverflow.com/questions/34615425/how-to-watch-for-form-changes-in-angular-2/34629083#34629083.
AngularConnect 2015 ve EggHead'de iki harika sunum var:
Christoph Burgdorf da konuyla ilgili bazı harika blog yazıları yazdı:
Eylemde__
Aslında kodunuzla ilgili olarak, iki yaklaşımı karıştırmışsınız ;-) İşte onlar:
Gözlemlenebiliri kendi başınıza yönetin. Bu durumda, gözlemlenebilir üzerinde subscribe
yöntemini çağırmaktan ve sonucu bileşenin bir niteliğine atamaktan sorumlusunuz. Daha sonra bu niteliği koleksiyon üzerinde yineleme yapmak için görünümde kullanabilirsiniz:
@Component({
şablon: `
<h1>Arkadaşlarım</h1>
<ul>
<li *ngFor="#frnd of result">
{{frnd.name}} {{frnd.age}} yaşında.
</li>
</ul>
`,
yönerge:[CORE_DIRECTIVES]
})
export class FriendsList implement OnInit, OnDestroy {
result:Array<Object>;
constructor(http: Http) {
}
ngOnInit() {
this.friendsObservable = http.get('friends.json')
.map(response => response.json())
.subscribe(result => this.result = result);
}
ngOnDestroy() {
this.friendsObservable.dispose();
}
}
Hem get
hem de map
yöntemlerinden elde edilen dönüşler, sonuç değil gözlemlenebilirdir (vaatlerle aynı şekilde).
Gözlemlenebiliri Angular şablonu ile yönetelim. Gözlemlenebiliri dolaylı olarak yönetmek için async
borusundan da yararlanabilirsiniz. Bu durumda, subscribe
yöntemini açıkça çağırmaya gerek yoktur.
@Component({
şablon: `
<h1>Arkadaşlarım</h1>
<ul>
<li *ngFor="#frnd of (result | async)">
{{frnd.name}} {{frnd.age}} yaşında.
</li>
</ul>
`,
yönerge:[CORE_DIRECTIVES]
})
export class FriendsList implement OnInit {
result:Array<Object>;
constructor(http: Http) {
}
ngOnInit() {
this.result = http.get('friends.json')
.map(response => response.json());
}
}
Gözlemlenebilirlerin tembel olduğunu fark edebilirsiniz. Bu nedenle, ilgili HTTP isteği yalnızca subscribe
yöntemi kullanılarak üzerine bir dinleyici eklendiğinde çağrılacaktır.
Ayrıca, map
yönteminin JSON içeriğini yanıttan çıkarmak ve daha sonra gözlemlenebilir işlemede kullanmak için kullanıldığını da fark edebilirsiniz.
Umarım bu size yardımcı olur, Thierry
import { HttpClientModule } from '@angular/common/http';
HttpClient API'si 4.3.0 sürümünde tanıtılmıştır. Mevcut HTTP API'sinin bir evrimidir ve kendi @angular/common/http paketine sahiptir. En önemli değişikliklerden biri, artık yanıt nesnesinin varsayılan olarak bir JSON olmasıdır, bu nedenle artık map yöntemiyle ayrıştırmaya gerek yoktur.
http.get('friends.json').subscribe(result => this.result =result);