RxJS入门小呆萌

作者: 冰果2016 | 来源:发表于2016-11-21 14:04 被阅读177次

RxJS入门小呆萌
Rxjs系列教程目录
小呆萌
喵呜日记~
呆萌呆萌的小菇凉
呆萌呆萌
呆萌，呆萌
呆萌可爱超小体约克夏弟弟
呆萌小僵尸
呆小萌回家

操作异步事件，一般可以用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的服务了！

源代码