Cả hai Promisesvà Observablescung cấp cho chúng tôi những khái niệm trừu tượng giúp chúng tôi xử lý tính chất không đồng bộ của các ứng dụng của chúng tôi. Sự khác biệt giữa chúng được chỉ ra rõ ràng bởi @ Günter và @Relu.
Vì một đoạn mã có giá trị bằng một ngàn từ, hãy xem qua ví dụ dưới đây để hiểu chúng dễ dàng hơn.
Cảm ơn @Christoph Burgdorf cho bài viết tuyệt vời
Angular sử dụng Rx.js Observables thay vì lời hứa để xử lý HTTP.
Giả sử rằng bạn đang xây dựng một chức năng tìm kiếm sẽ hiển thị ngay kết quả cho bạn khi bạn nhập. Âm thanh quen thuộc nhưng có rất nhiều thử thách đi kèm với nhiệm vụ đó.
- Chúng tôi không muốn nhấn vào điểm cuối của máy chủ mỗi khi người dùng nhấn phím, nó sẽ tràn ngập chúng với một cơn bão
HTTPyêu cầu. Về cơ bản, chúng tôi chỉ muốn nhấn nó một khi người dùng đã ngừng gõ thay vì với mỗi lần nhấn phím.
- Đừng nhấn điểm cuối tìm kiếm với cùng thông số truy vấn cho các yêu cầu tiếp theo.
- Đối phó với các phản ứng ngoài đơn đặt hàng. Khi chúng tôi có nhiều yêu cầu trên chuyến bay cùng một lúc, chúng tôi phải tính đến các trường hợp chúng quay lại theo thứ tự không mong muốn. Hãy tưởng tượng đầu tiên chúng ta gõ máy tính , dừng lại, một yêu cầu đi ra ngoài, chúng ta gõ xe , dừng lại, một yêu cầu đi ra ngoài. Bây giờ chúng tôi có hai yêu cầu trong chuyến bay. Thật không may, yêu cầu mang kết quả cho máy tính trở lại sau khi yêu cầu mang kết quả cho xe .
Bản demo sẽ chỉ bao gồm hai tệp: app.tsvà wikipedia-service.ts. Trong một kịch bản thế giới thực, rất có thể chúng ta sẽ phân chia mọi thứ hơn nữa.
Dưới đây là triển khai dựa trên Promise không xử lý bất kỳ trường hợp cạnh được mô tả nào.
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]);
}
}
Chúng tôi đang tiêm Jsonpdịch vụ để đưa ra GETyêu cầu đối với API Wikipedia với một thuật ngữ tìm kiếm nhất định. Lưu ý rằng chúng tôi gọi toPromiseđể có được từ một Observable<Response>đến a Promise<Response>. Cuối cùng kết thúc với Promise<Array<string>>kiểu trả về của phương thức tìm kiếm của chúng tôi.
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);
}
}
Không có nhiều bất ngờ ở đây. Chúng tôi tiêm WikipediaServicevà hiển thị chức năng của nó thông qua phương pháp tìm kiếm vào mẫu. Mẫu chỉ đơn giản là liên kết với keyup và các cuộc gọi search(term.value).
Chúng tôi mở ra kết quả của Promise rằng phương thức tìm kiếm của WikipediaService trả về và hiển thị nó dưới dạng một chuỗi các chuỗi đơn giản cho mẫu để chúng tôi có thể *ngForlặp qua nó và xây dựng một danh sách cho chúng tôi.
Xem ví dụ về triển khai dựa trên Promise trên Plunker
Nơi quan sát thực sự tỏa sáng
Hãy thay đổi mã của chúng tôi để không làm hỏng điểm cuối với mỗi lần nhấn phím mà thay vào đó chỉ gửi yêu cầu khi người dùng ngừng gõ trong 400 ms
Để tiết lộ những siêu năng lực như vậy, trước tiên chúng ta cần có một Observable<string>thuật ngữ tìm kiếm mà người dùng nhập vào. Thay vì liên kết thủ công với sự kiện keyup, chúng ta có thể tận dụng formControlchỉ thị của Angular . Để sử dụng chỉ thị này, trước tiên chúng ta cần nhập ReactiveFormsModulemô-đun ứng dụng.
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 {}
Sau khi nhập, chúng ta có thể sử dụng formControl từ trong mẫu của mình và đặt nó thành tên "hạn".
<input type="text" [formControl]="term"/>
Trong thành phần của chúng tôi, chúng tôi tạo một thể hiện FormControltừ @angular/formvà hiển thị nó dưới dạng một trường dưới thuật ngữ tên trên thành phần của chúng tôi.
Đằng sau hậu trường, thuật ngữ tự động hiển thị một Observable<string>tài sản valueChangesmà chúng ta có thể đăng ký. Bây giờ chúng tôi có một Observable<string>, khắc phục đầu vào của người dùng dễ dàng như gọi debounceTime(400)vào chúng tôi Observable. Điều này sẽ trả về một Observable<string>giá trị mới sẽ chỉ phát ra một giá trị mới khi chưa có giá trị mới trong 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));
}
}
Sẽ là lãng phí tài nguyên để gửi một yêu cầu khác cho cụm từ tìm kiếm mà ứng dụng của chúng tôi đã hiển thị kết quả. Tất cả những gì chúng ta phải làm để đạt được hành vi mong muốn là gọi cho distinctUntilChangednhà điều hành ngay sau khi chúng ta gọidebounceTime(400)
Xem ví dụ về triển khai quan sát trên Plunker
Để xử lý các phản hồi không theo thứ tự, vui lòng kiểm tra toàn bộ bài viết http: // blog. Dùtram.io / anga / 2016/06/06 / takes-nhược điểm -of-observables-in-
angular2.html
Theo như tôi đang sử dụng http trong Angular, tôi đồng ý rằng trong các trường hợp sử dụng thông thường, không có nhiều khác biệt khi sử dụng Observable so với Promise. Không có lợi thế nào thực sự có liên quan ở đây trong thực tế. Hy vọng tôi có thể thấy một số trường hợp sử dụng nâng cao trong tương lai :)
Tìm hiểu thêm
