RxJS入门小呆萌
2016-11-21 本文已影响177人
冰果2016
操作异步事件，一般可以用callback或是promise来达成，然而promise主要设计于一次性的事件与单一回传值，而RxJS除了包含Promise外，提供了更丰富的整合应用。我们先通过一个小呆萌展示一下使用RxJS的优势。
- 使用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方法监听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的服务了！
