Keduanya Promisesdan Observablesmemberi kami abstraksi yang membantu kami menangani sifat asinkron aplikasi kami. Perbedaan di antara mereka ditunjukkan dengan jelas oleh @ Günter dan @Relu.
Karena cuplikan kode bernilai ribuan kata, lepaskan contoh di bawah ini untuk lebih mudah memahaminya.
Terima kasih @Christoph Burgdorf untuk artikel yang luar biasa ini
Angular menggunakan Rx.js Observables alih-alih janji untuk berurusan dengan HTTP.
Misalkan Anda sedang membangun fungsi pencarian yang seharusnya langsung menampilkan hasil saat Anda mengetik. Terdengar akrab tetapi ada banyak tantangan yang datang dengan tugas itu.
- Kami tidak ingin mencapai titik akhir server setiap kali pengguna menekan tombol, itu akan membanjiri mereka dengan badai
HTTPpermintaan. Pada dasarnya, kami hanya ingin menekannya setelah pengguna berhenti mengetik bukan dengan setiap penekanan tombol.
- Jangan tekan titik akhir pencarian dengan parameter permintaan yang sama untuk permintaan berikutnya.
- Menangani tanggapan yang tidak sesuai pesanan. Ketika kami memiliki beberapa permintaan dalam penerbangan pada saat yang sama, kami harus memperhitungkan kasus di mana mereka kembali dalam urutan yang tidak terduga. Bayangkan kita pertama-tama mengetik komputer , berhenti, permintaan padam, kita ketik mobil , berhenti, permintaan padam. Sekarang kami memiliki dua permintaan dalam penerbangan. Sayangnya, permintaan yang membawa hasil untuk komputer kembali setelah permintaan yang membawa hasil untuk mobil .
Demo hanya akan terdiri dari dua file: app.tsdan wikipedia-service.ts. Dalam skenario dunia nyata, kita kemungkinan besar akan memecah hal-hal lebih lanjut.
Di bawah ini adalah implementasi berbasis janji yang tidak menangani kasus tepi yang dijelaskan.
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]);
}
}
Kami menyuntikkan Jsonplayanan untuk membuat GETpermintaan terhadap Wikipedia API dengan istilah pencarian yang diberikan. Perhatikan bahwa kami menelepon toPromiseuntuk mendapatkan dari a Observable<Response>ke a Promise<Response>. Akhirnya berakhir dengan Promise<Array<string>>sebagai jenis pengembalian metode pencarian kami.
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);
}
}
Tidak terlalu mengejutkan di sini. Kami menyuntikkan WikipediaServicedan mengekspos fungsionalitasnya melalui metode pencarian ke templat. Template hanya mengikat keyup dan panggilan search(term.value).
Kami membuka hasil dari Janji bahwa metode pencarian dari Layanan Wikipedia kembali dan mengeksposnya sebagai array sederhana string ke template sehingga kami dapat memiliki *ngForloop melalui itu dan membangun daftar untuk kami.
Lihat contoh implementasi berbasis Janji pada Plunker
Di mana diamati benar-benar bersinar
Mari kita mengubah kode kita untuk tidak memalu titik akhir dengan setiap penekanan tombol tetapi alih-alih hanya mengirim permintaan ketika pengguna berhenti mengetik 400 ms
Untuk mengungkap kekuatan super seperti itu, pertama-tama kita perlu mendapatkan Observable<string>yang membawa istilah pencarian yang diketikkan pengguna. Daripada mengikat secara manual ke acara keyup, kita bisa mengambil keuntungan dari formControlarahan Angular . Untuk menggunakan arahan ini, pertama-tama kita perlu mengimpor ReactiveFormsModuleke dalam modul aplikasi kita.
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 {}
Setelah diimpor, kita bisa menggunakan formControl dari dalam template kita dan mengaturnya ke nama "term".
<input type="text" [formControl]="term"/>
Dalam komponen kami, kami membuat turunan FormControldari @angular/formdan memaparkannya sebagai bidang di bawah istilah nama pada komponen kami.
Di belakang layar, istilah secara otomatis menampilkan Observable<string>properti sebagai tempat valueChangeskami dapat berlangganan. Sekarang kita memiliki Observable<string>, mengatasi input pengguna semudah memanggil debounceTime(400)kita Observable. Ini akan mengembalikan yang baru Observable<string>yang hanya akan mengeluarkan nilai baru ketika belum ada nilai baru untuk 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));
}
}
Ini akan menjadi pemborosan sumber daya untuk mengirimkan permintaan lain untuk istilah pencarian yang sudah ditunjukkan oleh aplikasi kami. Yang harus kita lakukan untuk mencapai perilaku yang diinginkan adalah memanggil distinctUntilChangedoperator tepat setelah kita menelepondebounceTime(400)
Lihat contoh implementasi yang dapat diamati pada Plunker
Untuk berurusan dengan tanggapan yang tidak sesuai pesanan, silakan periksa artikel lengkap http://blog.thoughtram.io/angular/2016/01/06/mengambil manfaat
Sejauh saya menggunakan Http di Angular, saya setuju bahwa dalam kasus penggunaan normal tidak ada banyak perbedaan ketika menggunakan Observable over Promise. Tidak ada keuntungan yang benar-benar relevan di sini dalam praktiknya. Semoga saya bisa melihat beberapa use case lanjutan di masa depan :)
Belajarlah lagi
