在Angular1.x中，我們使用Promise來處理各種異步。但是在angular2中，使用的是Reactive Extensions (Rx)的Observable。對于Promise和Observable的區(qū)別，網(wǎng)上有很多文章，推薦egghead.io上的這個7分鐘的視頻（作者 Ben Lesh）。在這個視頻的介紹中，主要說的，使用Observable創(chuàng)建的異步任務(wù)，可以被處理，而且是延時加載的。這篇文章里，我們主要針對一些在跟服務(wù)器端交互的時候遇到的問題，來看看Observable給我們帶來的特性。

實例場景

首先，我們來定義一下問題的場景。假設(shè)我們要實現(xiàn)一個搜索功能，有一個簡單的輸入框，當(dāng)用戶輸入文字的時候，實時的利用輸入的文字進行查詢，并顯示查詢的結(jié)果。

問題

在這個簡單的場景當(dāng)中，一般需要考慮3個問題：

不能在用戶輸入每個字符的時候就觸發(fā)搜索。

如果用戶輸入每個字符就觸發(fā)搜索，一來浪費服務(wù)器資源，二來客戶端頻繁觸發(fā)搜索，以及更新搜索結(jié)果，也會影響客戶端的響應(yīng)。一般這個問題，都是通過加一些延時來避免。

如果用戶輸入的文本沒有變化，就不應(yīng)該重新搜索。

假設(shè)用戶輸入了'foo'以后，停頓了一會，觸發(fā)了搜索，再敲了一個字符'o'，結(jié)果發(fā)現(xiàn)打錯了，又刪掉了這個字符。如果這個時候用戶又停頓一會，導(dǎo)致觸發(fā)了搜索，這次的文本'foo'跟之前搜索的時候的文本是一樣的，所以不應(yīng)該再次搜索。

要考慮服務(wù)器的異步返回的問題。

當(dāng)我們使用異步的方式往服務(wù)器端發(fā)送多個請求的時候，我們需要注意接受返回的順序是無法保證的。比如我們先后搜索了2個單詞'computer', ‘car', 雖然'car'這個詞是后來搜的，但是有可能服務(wù)器處理這個搜索比較快，就先返回結(jié)果。這樣頁面就會先顯示'car'的搜索結(jié)果，然后等收到'computer'的搜索結(jié)果的時候，再顯示'computer'的結(jié)果。但是，這時候在用戶看來明明搜索的是'car'，卻顯示的是另外的結(jié)果。

迎接挑戰(zhàn)

在這個實例中，我們使用wikipedia的api接口來開發(fā)一個簡單的實例，實現(xiàn)簡單的搜索功能。

實現(xiàn)搜索

由于只是演示，我們的app里面只包含2個文件: app.ts 和 wikipedia-service.ts，最終版本的源文件，請參考原文提供的demo鏈接。

我們直接來看最初版本的WikipediaService是如何實現(xiàn)的：

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]);}}