RxJS入门小呆萌

操作异步事件，一般可以用callback或是promise来达成，然而promise主要设计于一次性的事件与单一回传值，而RxJS除了包含Promise外，提供了更丰富的整合应用。我们先通过一个小呆萌展示一下使用RxJS的优势。

1. 使用RxJS结合jQuery打造Wikipedia Autocompletion Service。

step1. 引入脚本文件，添加需要的DOM元素

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)=>$("
"+value+"
").appendTo($result));
},error=>{
  $result.empty();
  $('
Error: ' + error +'
').appendTo($result);
});

就这么简单完成了一个Autocompletion的服务了！

源代码