操作異步事件，一般可以用callback或是promise來達成，然而promise主要設計于一次性的事件與單一回傳值，而RxJS除了包含Promise外，提供了更豐富的整合應用。我們先通過一個小呆萌展示一下使用RxJS的優(yōu)勢。
- 使用RxJS結合jQuery打造Wikipedia Autocompletion Service。
step1. 引入腳本文件，添加需要的DOM元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<title>Why RxJS</title>
</head>
<body>
<input type="text" id="input">
<ul id='results'></ul>
</body>
</html>
step2. 通過使用Rx.Observable.fromEvent方法監(jiān)聽keyup事件，獲取用戶輸入。
var $input = $('#input'),
$result = $('#results');
var keyups = Rx.Observable.fromEvent($input,'keyup')
.map(e=>e.target.value)
.filter(text=>text.length>2);
var throttle = keyups.throttle(500);
var distinct = throttle.distinctUntilChanged();
step3. ajax調用search api,直接返回pormise，RxJS會幫忙Wrap成Obserable.
function searchWikipedia(term){
return $.ajax({
url:'http://en.wikipedia.org/w/api.php',
dataType:'jsonp',
data:{
action:'opensearch',
format:'json',
search:term
}
}).promise();
}
step4.我們調用observable序列上的subscribe方法來提取數據
var suggestions = distinct.flatMapLatest(searchWikipedia);
suggestions.subscribe(data=>{
var res = data[1];
$result.empty();
$.each(res,(_,value)=>$("<li>"+value+"</li>").appendTo($result));
},error=>{
$result.empty();
$('<li>Error: ' + error +'</li>').appendTo($result);
});
就這么簡單完成了一個Autocompletion的服務了！
