双方Promises并Observables提供给我们，帮助我们应对抽象异步我们的应用程序的性质。@Günter和@Relu明确指出了它们之间的区别。
由于一个代码片段包含一千个单词，因此下面的示例使它们更容易理解。
感谢@Christoph Burgdorf的精彩文章
Angular使用Rx.js Observables代替了用于处理HTTP的Promise。
假设您正在构建一个搜索功能，该功能应在您键入时立即显示结果。听起来很熟悉，但是该任务面临很多挑战。
- 我们不想每次用户按下一个键时都击中服务器端点，它应该向他们发出大量
HTTP请求。基本上，我们只希望在用户停止键入后才敲击它，而不是每次击键都击中它。
- 不要为后续请求使用具有相同查询参数的搜索端点。
- 处理乱序响应。当我们同时有多个请求进行时，我们必须考虑到它们以意外顺序返回的情况。想象我们先键入计算机，停止，一个请求熄灭，我们键入汽车，停止，一个请求熄灭。现在我们正在进行两个请求。不幸的是，携带计算机结果的请求在携带汽车结果的请求之后又回来了。
该演示将仅包含两个文件：app.ts和wikipedia-service.ts。但是，在现实世界中，我们很可能会将事情进一步拆分。
以下是基于Promise的实现，该实现不处理任何描述的极端情况。
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]);
}
}
我们正在注入该Jsonp服务，以使用给定的搜索词GET针对Wikipedia API发出请求。请注意，我们toPromise为了从Observable<Response>到进行调用Promise<Response>。最终以a 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);
}
}
这里也没有什么惊喜。我们WikipediaService通过模板的搜索方法注入并公开其功能。该模板仅绑定到keyup和call search(term.value)。
我们解开Promise的结果，即WikipediaService的搜索方法返回并将其作为简单的字符串数组公开给模板，以便我们可以*ngFor遍历它并为我们建立一个列表。
请参阅在Plunker上基于Promise的实现示例
当观测量大放异彩
让我们更改代码，以免每次敲击都敲击端点，而仅在用户停止键入400毫秒时发送请求
为了揭示这种超级能力，我们首先需要获取一个Observable<string>带有用户键入搜索词的工具。我们可以利用Angular的formControl指令，而不是手动绑定到keyup事件。要使用此指令，我们首先需要将导入ReactiveFormsModule到我们的应用程序模块中。
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 {}
导入后，我们可以在模板中使用formControl并将其设置为名称“ term”。
<input type="text" [formControl]="term"/>
在我们的组件中，我们创建一个FormControlfrom 的实例，@angular/form并将其公开为一个字段，该字段位于我们组件上的名称术语下。
在幕后，term自动显示我们可以订阅的Observable<string>as属性valueChanges。现在我们有了一个Observable<string>，克服用户输入就像调用debounceTime(400)我们的一样容易Observable。这将返回一个新Observable<string>值，该值仅在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));
}
}
发送另一个对我们的应用程序已经显示出搜索结果的搜索词的请求，将浪费资源。为了实现所需的行为，我们要做的就是在调用distinctUntilChanged后立即调用操作符debounceTime(400)
请参阅Plunker上的Observable实现示例
对于处理乱序的响应，请查看全文
http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
就我在Angular中使用Http而言，我同意在正常使用情况下使用Observable over Promise并没有太大区别。在实践中，这些优势都没有真正相关。希望以后能看到一些高级用例:)
学到更多
