目录

希望是最浅显易懂的RxJS教程

前言

偶有一天在邮箱里看到的。刚好周末又听到相关的主题,所以。。。今日早读文章由@huli分享。

@huli,野生工程师,相信分享与交流能让世界变得更美好。

正文从这开始~

关注RxJS已经好一段时间了,最早知道这个东西是因为redux-observable,是一个redux的middleware,Netflix利用它来解决复杂的非同步相关问题,那时候我连redux-saga都还没搞懂,没想到就又有新的东西出来了。

半年前花了一些时间,在网络上找了很多资料,试着想要搞懂这整个东西。可是对我来说,很多教程的步调都太快了,不然就是讲的太仔细,反而让初学者无所适从。

这次有机会在公司的新项目里面尝试使用redux-observable,身为提倡要引入的人,势必要对这个东西有一定的了解。秉持着这个想法,上周认真花了点时间再次把相关资源都研究了一遍,渐渐整理出一套“我觉得应该可以把RxJS讲得更好懂”的方法,在这边跟大家分享一下。

好,那就让我们开始吧!

请你先忘掉RxJS

没错,你没有看错。

要学会RxJS的第一件事就是:忘记它。

忘记有这个东西,完全忘记,先让我讲几个其他东西,等我们需要讲到RxJS的时候,我会在提醒你。

在我们谈到主角之前,先来做一些有趣的事情吧。

程序基础能力测试

先让我们做一个简单的练习题暖身,题目是这样的:

有一个数组,里面包含三种类型,数字、a~z组成的字符串、数字组成的字符串,请你把每个数字以及数字组成的字符串乘以二之后相加。
比如输入:[1,5,9,3,’hi’,’tb’,456,’11’,’yoyoyo’]

你看完之后应该会说:这有什么难的?并且在一分钟以内就写出下面的代码:

  1. const source = [ 1 , 5 , 9 , 3 , 'hi' , 'tb' , 456 , '11' , 'yoyoyo' ];
  2. let total = 0 ;
  3. for ( let i = 0 ; i < source.length; i++) {
  4. let num = parseInt (source[i], 10 );
  5. if (! isNaN (num)) {
  6. total += num * 2 ;
  7. }
  8. }

相信大家一定都是很直觉的就写出上面的代码,但如果你是个functional programming 的爱好者,你可能会改用另外一种思路来解决问题:

  1. const source = [ 1 , 5 , 9 , 3 , 'hi' , 'tb' , 456 , '11' , 'yoyoyo' ];
  2. let total = source
  3. .map( x => parseInt (x, 10 ))
  4. .filter( x => ! isNaN (x))
  5. .map( x => x * 2 )
  6. .reduce( ( total, value ) => total + value )

一开始的例子叫做Imperative(命令式),用数组搭配一堆函数的例子叫做Declarative(声明式)。如果你去查了一下定义,应该会看到这两个的解释:

Imperative 是命令机器去做事情(how),这样不管你想要的是什么(what),都会按照你的命令实现;Declarative 是告诉机器你想要的是什么(what),让机器想出如何去做(how)

好,你有看懂上面这些在说什么吗?

我是没有啦。

所以让我们再看一个例子,其实Declarative 你已经常常在用了,只是你不知道而已,那就是SQL:

  1. SELECT * from dogs INNER JOIN owners WHERE dogs.owner_id = owners.id

这句话就是:我要所有狗的资料加上主人的资料。

我只有说「我要」而已,那要怎么拿到这些资料?我不知道,我也不用知道,都让SQL 底层决定怎么去操作就好。

如果我要自己做出这些资料,在JavaScript里面我必须这样写(代码取自声明式编程和命令式编程的比较):

  1. //dogs = [{name: 'Fido', owner_id: 1}, {...}, ... ]
  2. //owners = [{id: 1, name: 'Bob'}, {...}, ...]
  3. var dogsWithOwners = []
  4. var dog, owner
  5. for ( var di= 0 ; di < dogs.length; di++) {
  6. dog = dogs[di]
  7. for ( var oi= 0 ; oi < owners.length; oi++) {
  8. owner = owners[oi]
  9. if (owner && dog.owner_id == owner.id) {
  10. dogsWithOwners.push({
  11. dog : dog,
  12. owner : owner
  13. })
  14. }
  15. }
  16. }

应该可以大致体验出两者的差别吧?后者你必须自己一步步去决定该怎么做,而前者只是仅仅跟你说:「我想要怎样的资料」而已。

接着我们再把目光放回到把数字乘以二相加的那个练习。对我来说,最大的不同点是后面那个用数组搭配函数的例子,他的核心概念是:

把原始资料经过一连串的转换,变成你想要的信息

这点超级重要,因为在一开始的例子中,我们是自己一步步去parse,去检查去相加,得出数字的总和。而后面的那个例子,他是把原始的资料(数组),经过一系列的转换(map, filter, reduce),最后变成了我们想要的答案。

画成图的话,应该会长这样(请原谅我偷懒把乘二的部分拿掉了,但意思不影响):

把原始资料经过一连串的转换,最后变成你想要的答案,这点就是后者最大的不同。只要你有了这个基础知识之后,再来看RxJS 就不会觉得太奇怪了。

Reactive Programming

谈到RxJS 的时候,都会谈到Reactive 这个词,那什么是Reactive 呢?可以从英文上的字义来看,这个单字的意思是:「反应、反应性的」,意思就是你要对一些事情做出反应。

所以Reactive 其实就是在讲说:「某些事情发生时,我能够做出反应」。

让我们来举一个大家非常熟知的例子:

  1. window .addEventListener( 'click' , function () {
  2. console .log( 'click!' );
  3. })

我们加了一个event listener 在window 上面,所以我们可以监听到这个事件,每当使用者点击的时候就列印出log。换句话说,这样就是:「当window 被点击时,我可以做出反应」。

正式进入RxJS

如果你去看ReactiveX的网页,你会发现他有明确的定义ReactiveX:

ReactiveX is a combination of the best ideas from
the Observer pattern, the Iterator pattern, and functional programming

第一个Observer pattern 就像是event listener 那样,在某些事情发生时,我们可以对其作出反应;第二个Iterator pattern 我们跳过不讲,我认为暂时不影响理解;第三个就像是一开始的例子,我们可以把一个数组经过多次转换,转换成我们想要的资料。

在Reactive Programming 里面,最重要的两个东西叫做Observable 跟Observer,其实一开始让我最困惑的点是因为我英文不好,不知道这两个到底谁是观察的谁是被观察的。

先把它们翻成中文,Observable 就是「可被观察的」,Observer 就是所谓的「观察者」。

这是什么意思呢?就如同上面的例子一样,当(可被观察的东西)有事情发生,(Observer,观察者)就可以做出反应。

直接举一个例子你就知道了:

  1. Rx.Observable.fromEvent( window , 'click' )
  2. .subscribe( e => {
  3. console .log( 'click~' );
  4. })

上面这段代码跟window加上event listener在做的事情完全一样,只是这边我们使用了RxJS提供的方法叫做fromEvent,来把一个event转成Observable(可被观察的),并且在最后加上subscribe。

这样写就代表说我订阅了这个Observable,只要有任何事情发生,就会执行我传进去的function。

所以到底什么是Observable?

Observable 就是一个可被观察的对象,这个对象可以是任何东西(例如说上述例子就是window 的click 事件),当有新资料的时候(例如说新的点击事件),你就可以接收到这个新资料的信息并且做出反应。

比起Observable这个冷冰冰的说法,我更喜欢的一个说法是stream,信息流。其实每一个Observable就是一个信息流,但什么是信息流?你就想像成是会一直增加元素的数组就好了,有新的事件发生就push进去。如果你喜欢更专业一点的说法,可以叫它:「时间序列上的一连串信息事件」(取自Reactive Programming简介与教学(以RxJS为例))

或是我再举一个例子,stream 的另外一个解释就是所谓的「串流视频」,意思就是随着你不断播放,就会不断下载新的片段进来。此时你脑中应该要有个画面,就是像水流那样,不断有新的东西流进来,这个东西就叫做stream。

我理解信息流了,然后呢?

上面有说过,我们可以把任何一个东西转成Observable,让它变成信息流,可是这不就跟addEventListener 一样吗?有什么特别的?

有,还真的比较特别。

希望你没有忘记我们刚开始做的那个小练习,就是把一个数组透过一系列转换,变成我们要的那个练习。我刚刚有说,你可以把Observable 想成是「会一直增加元素的数组」,这代表什么呢?

代表我们也可以把Observable 做一系列的转换!我们也可以用那些用在数组上的function!

  1. Rx.Observable.fromEvent( window , 'click' )
  2. .map( e => e.target)
  3. .subscribe( value => {
  4. console .log( 'click: ' , value)
  5. })

我们把click 事件经过map 转换为点击到的element,所以当我们最后在subscribe 的时候,收到的value 就会是我们点击的东西。

接着来看一个稍微进阶一点的例子:

  1. Rx.Observable.fromEvent( window , 'click' )
  2. .map( e => 1 )
  3. .scan( ( total, now ) => total + now)
  4. .subscribe( value => {
  5. document .querySelector( '#counter' ).innerText = value;
  6. })

首先我们先把每一个click事件都透过map转换成1(或者你也可以写成.mapTo(1)),所以每按一次就送出一个数字1。scan的话其实就是我们一开始对数组用的reduce,你可以想成是换个名字而已。透过scan加总以后传给subscriber,显示在页面上面。

就这样简单几行,就完成了一个计算点击次数的counter。

可以用一个简单的gif 图来表示上面的范例:

可是Observable 不只这样而已,接下来我们要进入到它最厉害的地方了。

威力无穷的组合技

如果把两个数组合并,会变成什么?例如说[1, 2, 3]跟[4, 5, 6]?

这要看你指的「合并」是什么,如果是指相连,那就是[1, 2, 3, 4, 5, 6],如果是指相加,那就是[5, 7, 9]。

那如果把两个Observable 合并会变成什么?

Observable 跟数组的差别就在于多了一个维度:时间。

Observable 是「时间序列上的一连串信息事件」,就像我前面讲的一样,可以看成是一个一直会有新资料进来的数组。

我们先来看看一张很棒的图,很清楚地解释了两个Observable 合并会变成什么:

取自:http://rxmarbles.com/#merge

上面是一个Observable,每一个圆点代表一个资料,下面也是一样,把这两个合并之后就变成最下面那一条,看图解应该还满好懂的,就像是把两个时间轴合并一样。

让我们来看一个可以展现合并强大之处的范例,我们有+1 跟-1 两个按钮以及文字显示现在的数字是多少:

该怎么实现这个功能呢?基本的想法就是我们先把每个+1的click事件都通过mapTo变成数字1,取叫Observable_plus1好了。再做出一个Observable_minus1是把每个-1的click事件都通过mapTo变成数字-1。

把这两个Observable合并之后,再利用刚刚提到的scan加总,就是目前应该要显示的数字了!

  1. Rx.Observable.fromEvent( document .querySelector( 'input[name=plus]' ), 'click' )
  2. .mapTo( 1 )
  3. .merge(
  4. Rx.Observable.fromEvent( document .querySelector( 'input[name=minus]' ), 'click' )
  5. .mapTo( -1 )
  6. )
  7. .scan( ( total, now ) => total + now)
  8. .subscribe( value => {
  9. document .querySelector( '#counter' ).innerText = value;
  10. })

如果你还是不懂的话,可以参考下面的精美范例,示范这两个Observable是怎么合在一起的(O代表点击事件,+1跟-1则是mapTo之后的结果):

让我们来比较一下如果不用Observable 的话,代码会长怎样:

  1. var total = 0 ;
  2. document .querySelector( 'input[name=plus]' ).addEventListener( 'click' , () => {
  3. total++;
  4. document .querySelector( '#counter' ).innerText = total;
  5. })
  6. document .querySelector( 'input[name=minus]' ).addEventListener( 'click' , () => {
  7. total--;
  8. document .querySelector( '#counter' ).innerText = total;
  9. })

有没有发觉两者真的差别很大?就如同我之前所说的,是两种完全不同的思考模式,所以Reactive Programming 困难的地方不是在于理解,也不是在于语法(这两者相信你目前都有些概念了),而是在于换一种全新的思考模式。

以上面的写法来说,就是告诉电脑:「按下加的时候就把一个变数+1,然后更改文字;按下减的时候就-1 并且也更改文字」,就可以达成计数器的功能。

以Reactive 的写法,就是把按下加当成一个信息流,把按下减也当成一个信息流,再透过各种function 把这两个流转换并且合并起来,让最后的那个流就是我们想要的结果(计数器)。

你现在应该能体会到我一开始说的了:「把原始信息经过一连串的转换,最后变成你想要的答案」,这点就是Reactive Programming 最大的特色。

组合技中的组合技

我们来看一个更复杂一点的范例,是在canvas 上面实现非常简单的绘图功能,就是鼠标按下去之后可以画画,放开来就停止。

要实现这个功能很简单,canvas提供lineTo(x, y)这个方法,只要在鼠标移动时不断调用这个方法,就可以不断画出图形来。但有一点要注意的是当你在按下鼠标时,应该先调用moveTo(x, y)把绘图的点移到指定位置,为什么呢?

假设我们第一次画图是在左上角,第二次按下鼠标的位置是在右下角,如果没有先用moveTo移动而是直接用lineTo的话,就会多一条线从左上角延伸到右下角。moveTo跟lineTo的差别就是前者只是移动,后者会跟上次的点连接在一起画成一条线。

  1. var canvas = document .getElementById( 'canvas' );
  2. var ctx = canvas.getContext( '2d' );
  3. ctx.beginPath(); //开始画画
  4. function draw ( e ) {
  5. ctx.lineTo(e.clientX,e.clientY); //移到鼠标在的位置
  6. ctx.stroke(); //画画
  7. }
  8. // 按下去鼠标才开始侦测mousemove 事件
  9. canvas.addEventListener( 'mousedown' , function ( e ) {
  10. ctx.moveTo(e.clientX, e.clientY); //每次按下的时候必须要先把绘图的点移到那边,否则会受上次画的位置影响
  11. canvas.addEventListener( 'mousemove' , draw);
  12. })
  13. // 放开鼠标就停止侦测
  14. canvas.addEventListener( 'mouseup' , function ( e ) {
  15. canvas.removeEventListener( 'mousemove' , draw);
  16. })

那如果在RxJS 里面,该怎么实作这个功能呢?

首先凭直觉,应该就是先加上mousedown的事件对吧!至少有个开头。

  1. Rx.Observable.fromEvent(canvas, 'mousedown' )
  2. .subscribe( e => {
  3. console .log( 'mousedown' );
  4. })

可是鼠标按下去之后应该要变成什么?这个时候应该要开始监听mousemove对吧,所以我们这样写,用mapTo把每一个mousedown的事件都转换成mousemove的Observable:

  1. Rx.Observable.fromEvent(canvas, 'mousedown' )
  2. .mapTo(
  3. Rx.Observable.fromEvent(canvas, 'mousemove' )
  4. )
  5. .subscribe( value => {
  6. console .log( 'value: ' , value);
  7. })

接着你看一下console,你会发现每当我点击的时候,console 就会印出FromEventObservable {_isScalar: false, sourceObj: canvas#canvas, eventName: “mousemove”, selector: undefined, options: undefined}

仔细想一下你会发现也满合理的,因为我用mapTo把每一个鼠标按下去的事件转成一个mousemove的Observable,所以用subscribe订阅之后拿到的东西就会是这个Observable。如果画成图,大概长得像这样:

好了,那怎么办呢?我想要的其实不是Observable 本身,而是属于这个Observable 里面的那些东西啊!现在这个情形就是Observable 里面又有Observable,有两层,可是我想要让它变成一层就好,该怎么办呢?

在此提供一个让Observable 变简单的诀窍:

只要有问题,先想想Array 就对了!

我前面有提过,可以把Observable 看成是加上时间维度的进阶版数组,因此只要是数组有的方法,Observable 通常也都会有。

举例来说,一个数组可能长这样:[1, [2, 2.5], 3, [4, 5]]一共有两层,第二层也是一个数组。

如果想让它变一层的话怎么办呢?压平!

有用过lodash或是其他类似的library的话,你应该有听过_.flatten这个方法,可以把这种数组压平,变成:[1, 2, 2.5, 3, 4, 5]。

用flat这个关键字去搜寻Rx文件的话,你会找到一个方法叫做FlatMap,简单来说就是先map之后再自动帮你压平。

所以,我们可以把代码改成这样:

  1. Rx.Observable.fromEvent(canvas, 'mousedown' )
  2. .flatMap( e => Rx.Observable.fromEvent(canvas, 'mousemove' ))
  3. .subscribe( e => {
  4. console .log(e);
  5. })

当你点击之后,会发现随着鼠标移动,console 会印出一大堆log,就代表我们成功了。

画成示意图的话会变成这样(为了方便说明,我把flatMap在图片上变成map跟flatten两个步骤):

接下来呢?接下来我们要让它可以在鼠标松开的时候停止,该怎么做呢?RxJS有一个方法叫做takeUntil,意思就是拿到…发生为止,传进去的参数必须是一个Observable。

举例来说,如果写.takeUntil(window, ‘click’),就表示如果任何window发生的点击事件,这个Observable就会立刻终止,不会再送出任何信息。

应用在绘画的例子上,我们只要把takeUntil后面传的参数换成鼠标松开就好!顺便把subscribe跟画画的function也一起完成吧!

  1. Rx.Observable.fromEvent(canvas, 'mousedown' )
  2. .flatMap( e => Rx.Observable.fromEvent(canvas, 'mousemove' ))
  3. .takeUntil(Rx.Observable.fromEvent(canvas, 'mouseup' ))
  4. .subscribe( e => {
  5. draw(e);
  6. })

改完之后马上来实验一下!鼠标按下去之后顺利开始画图,松开以后画图停止,完美!

咦,可是怎么按下第二次就没反应了?我们做出了一个「只能够成功画一次图」的Observable。

为什么呢?我们可以先来看一下takeUntil的示意图(取自:http://rxmarbles.com/#takeUntil)

以我们的情形来说,就是只要mouseup事件发生,「整个Observable」就会停止,所以只有第一次能够画图成功。但我们想要的其实不是这样,我们想要的是只有mousemove停止而已,而不是整个都停止。

所以,我们应该把takeUntil放在mousemove的后面,也就是:

  1. Rx.Observable.fromEvent(canvas, 'mousedown' )
  2. .flatMap( e => Rx.Observable.fromEvent(canvas, 'mousemove' )
  3. .takeUntil(Rx.Observable.fromEvent(canvas, 'mouseup' ))
  4. )
  5. .subscribe( e => {
  6. draw(e);
  7. })

这样子里面的那个mousemove的Observable就会在鼠标松开时停止发送事件,而我们最外层的这个Observable监听的是鼠标按下,会一直监听下去。

到这边其实就差不多了,但还有一个小bug要修,就是我们没有在mousedown的时候利用moveTo移动,造成我们一开始说的那个会把上次画的跟这次画的连在一起的问题。

那怎么办呢?我已经把mousedown事件转成其他资料流了,我要怎么在mousedown的时候做事?

有一个方法叫做do,就是为了这种情形而设立的,使用时机是:「你想做一点事,却又不想影响信息流」,有点像是能够针对不同阶段subscribe的感觉,mousedown的时候subscribe一次,最后要画图的时候又subscribe一次。

  1. Rx.Observable.fromEvent(canvas, 'mousedown' )
  2. .do( e => {
  3. ctx.moveTo(e.clientX, e.clientY)
  4. })
  5. .flatMap( e => Rx.Observable.fromEvent(canvas, 'mousemove' )
  6. .takeUntil(Rx.Observable.fromEvent(canvas, 'mouseup' ))
  7. )
  8. .subscribe( e => {
  9. draw(e);
  10. })

到这边,我们就顺利完成了画图的功能。

如果你想试试看你有没有搞懂,可以实作看看拖拉移动物体的功能,原理跟这个很类似,都是侦测滑鼠的事件并且做出反应。

喝口水休息一下,下半场要开始了

上半场的目标在于让你理解什么是Rx,并且掌握几个基本概念:

下半场专注的点则是在于实战应用,并且围绕着RxJS 最适合的场景之一:API。

前面我们有提到说可以把DOM节点的event 变成信息流,但除了这个以外,Promise 其实也可以变成信息流。概念其实也很简单啦,就是Promise 被resovle 的时候就发送一个信息,被reject 的时候就终止。

让我们来看一个简单的小范例,每按一次按钮就会发送一个request

  1. function sendRequest () {
  2. return fetch( 'https://jsonplaceholder.typicode.com/posts/1' ).then( res => res.json())
  3. }
  4. Rx.Observable.fromEvent( document .querySelector( 'input[name=send]' ), 'click' )
  5. .flatMap( e => Rx.Observable.fromPromise(sendRequest()))
  6. .subscribe( value => {
  7. console .log(value)
  8. })

这边用flatMap的原因跟刚才的画图范例一样,我们要在按下按钮时,把原本的信息流转换成新的信息流,如果只用map的话,会变成一个二维的Observable,所以必须要用flatten把它压平。

你可以试试看把flatMap改成map,你最后subscribe得到的值就会是一堆Observable而不是你想要的信息。

知道怎么用Rx 来处理API 之后,就可以来做一个经典范例了:AutoComplete。

我在做这个范例的时候有极大部分参考30天精通RxJS(19):实务范例-简易Auto Complete实作、Reactive Programming简介与教学(以RxJS为例)以及构建流式应用—RxJS详解,再次感谢这三篇文章。

为了要让大家能够体会Reactive Programming 跟一般的有什么不一样,我们先用老方法做出这个Auto Complete 的功能吧!

先来写一下最底层的两个函数,负责抓资料的以及render 建议清单的,我们使用维基百科的API 来当作范例:

  1. function searchWikipedia ( term ) {
  2. return $.ajax({
  3. url : 'http://en.wikipedia.org/w/api.php' ,
  4. dataType : 'jsonp' ,
  5. data : {
  6. action : 'opensearch' ,
  7. format : 'json' ,
  8. search : term
  9. }
  10. }).promise();
  11. }
  12. function renderList ( list ) {
  13. $( '.auto-complete__list' ).empty();
  14. $( '.auto-complete__list' ).append(list.map( item => '<li>' + item + '</li>' ))
  15. }

这边要注意的一个点是维基百科回传的信息会是一个数组,格式如下:

  1. [你输入的关键字, 关键字清单, 每个关键字的介绍, 每个关键字的连结]
  2. // 范例:
  3. [
  4. "dd",
  5. ["Dd", "DDR3 SDRAM", "DD tank"],
  6. ["", "Double data rate type three SDRAM (DDR3 SDRAM)", "DD or Duplex Drive tanks"],
  7. [https://en.wikipedia.org/wiki/Dd", "https://en.wikipedia.org/wiki/DDR3_SDRAM", "...略"]
  8. ]

在我们的简单示范中,只需要取index为1的那个关键字清单就好了。而renderList这个function则是传进一个数组,就会把数组内容转成li显示出来。

有了这两个最基础的function 之后,就可以很轻易地完成Auto Complete 的功能:

  1. document .querySelector( '.auto-complete input' ).addEventListener( 'input' , (e) => {
  2. searchWikipedia(e.target.value).then( ( data ) => {
  3. renderList(data[ 1 ])
  4. })
  5. })

代码应该很好懂,就是每次按下输入东西的时候去call api,把回传的信息拿给renderList去渲染。

最基本的功能完成了,我们要来做一点优化,因为这样子的实作其实是有一些问题的。

第一个问题,现在只要每打一个字就会送出一个request,可是这样做其实有点浪费,因为使用者可能快速的输入了:java想要找相关的资料,他根本不在乎j、ja、jav这三个request。

要怎么做呢?我们就改写成如果250ms 里面没有再输入新的东西才发送request 就好,就可以避免这种多余的浪费。

这种技巧称作debounce,案例上也很简单,就是利用setTimeout跟clearTimeout。

  1. var timer = null ;
  2. document .querySelector( '.auto-complete input' ).addEventListener( 'input' , (e) => {
  3. if (timer) {
  4. clearTimeout(timer);
  5. }
  6. timer = setTimeout( () => {
  7. searchWikipedia(e.target.value).then( ( data ) => {
  8. renderList(data[ 1 ])
  9. })
  10. }, 250 )
  11. })

在input 事件被触发之后,我们不直接做事情,而是设置了一个250ms 过后会触发的timer,如果250ms 内input 再次被触发的话,我们就把上次的timer 清掉,再重新设置一个。

如此一来,就可以保证使用者如果在短时间内不断输入文字的话,不会送出相对应的request,而是会等到最后一个字打完之后的250 ms 才发出request。

解决了第一个问题之后,还有一个潜在的问题需要解决。

假设我现在输入a,接着删除然后再输入b,所以第一个request会是a的结果,第二个request会是b的结果。我们假设server出了一点问题,所以第二个的response反而比第一个还先到达(可能b的搜寻结果有cache但是a没有),这时候就会先显示b的内容,等到第一个response回来时,再显示a的内容。

可是这样UI就有问题了,我明明输入的是b,怎么auto complete的推荐关键字是a开头?

所以我们必须要做个检查,检查返回的信息跟我现在输入的信息是不是一致,如果一致的话才render:

  1. var timer = null ;
  2. document .querySelector( '.auto-complete input' ).addEventListener( 'input' , (e) => {
  3. if (timer) {
  4. clearTimeout(timer);
  5. }
  6. timer = setTimeout( () => {
  7. searchWikipedia(e.target.value).then( ( data ) => {
  8. if (data[ 0 ] === document .querySelector( '.auto-complete input' ).value) {
  9. renderList(data[ 1 ])
  10. }
  11. })
  12. }, 250 )
  13. })

到这里应该就差不多了,该有的功能都有了。

接着,让我们来挑战用RxJS 实作吧!

首先,先从简单版的开始做,就是不包含debounce跟上面API顺序问题的例子,监听input事件转换成request,然后用flatMap压平,其实就跟上面的流程差不多:

  1. Rx.Observable
  2. .fromEvent( document .querySelector( '.auto-complete input' ), 'input' )
  3. .map( e => e.target.value)
  4. .flatMap( value => {
  5. return Rx.Observable.from(searchWikipedia(value)).map( res => res[ 1 ])
  6. })
  7. .subscribe( value => {
  8. renderList(value);
  9. })

这边用了两个map,一个是把e转成e.target.value,一个是把传回来的结果转成res[1],因为我们只需要关键字列表,其他的东西其实都不用。

那要如何实作debounce的功能呢?

RxJS已经帮你实作好了,所以你只要加上.debounceTime(250)就好了,就是这么简单。

  1. Rx.Observable
  2. .fromEvent( document .querySelector( '.auto-complete input' ), 'input' )
  3. .debounceTime( 250 )
  4. .map( e => e.target.value)
  5. .flatMap( value => {
  6. return Rx.Observable.from(searchWikipedia(value)).map( res => res[ 1 ])
  7. })
  8. .subscribe( value => {
  9. renderList(value);
  10. })

还有最后一个问题要解决,那就是刚才提到的request 的顺序问题。

Observable 有一个不同的解法,我来解释给大家听听。

其实除了flatMap以外,还有另外一种方式叫做switchMap,他们的差别在于要怎么把Observable给压平。前者我们之前介绍过了,就是会把每一个二维的Observable都压平,并且「每一个都执行」。

而switchMap的差别在于,他永远只会处理最后一个Observable。拿我们的例子来说,假设第一个request还没回来的时候,第二个request就发出去了,那我们的Observable就只会处理第二个request,而不管第一个。

第一个还是会发送,还是会接收到信息,只是接收到信息以后不会再把这个信息emit 到Observable 上面,意思就是根本没人理这个信息了。

可以看一下简陋的图解,flatMap每一个promise resolve之后的资料都会被发送到我们的Observable上面:

而switchMap只会处理最后一个:

所以我们只要把flatMap改成switchMap,就可以永远只关注最后一个发送的request,不用去管request传回来的顺序,因为前面的request都跟这个Observable无关了。

  1. Rx.Observable
  2. .fromEvent( document .querySelector( '.auto-complete input' ), 'input' )
  3. .debounceTime( 250 )
  4. .map( e => e.target.value)
  5. .switchMap( value => {
  6. return Rx.Observable.from(searchWikipedia(value)).map( res => res[ 1 ])
  7. })
  8. .subscribe( value => {
  9. renderList(value);
  10. })

做到这边,就跟刚刚实作的功能一模一样了。

但其实还有地方可以改进,我们来做个小小的加强好了。现在的话当我输入abc,会出现abc的相关关键字,接着我把abc全部删掉,让input变成空白,会发现API这时候回传一个错误:The “search” parameter must be set.。

因此,我们可以在input是空的时候,不发送request,只回传一个空数组,而回传空数组这件事情可以用Rx.Observable.of([])来完成,这样会创造一个会发送空数组的Observable:

  1. Rx.Observable
  2. .fromEvent( document .querySelector( '.auto-complete input' ), 'input' )
  3. .debounceTime( 250 )
  4. .map( e => e.target.value)
  5. .switchMap( value => {
  6. return value.length < 1 ? Rx.Observable.of([]) : Rx.Observable.from(searchWikipedia(value)).map( res => res[ 1 ])
  7. })
  8. .subscribe( value => {
  9. renderList(value);
  10. })

还有一个点击关键字清单之后把文字设定成关键字的功能,在这边就不示范给大家看了,但其实就是再创造一个Observable 去监听点击事件,点到的时候就设定文字并且把关键字清单给清掉。

我直接附上参考代码:

  1. Rx.Observable
  2. .fromEvent( document .querySelector( '.auto-complete__list' ), 'click' )
  3. .filter( e => e.target.matches( 'li' ))
  4. .map( e => e.target.innerHTML)
  5. .subscribe( value => {
  6. document .querySelector( '.auto-complete input' ).value = value;
  7. renderList([])
  8. })

虽然我只介绍了最基本的操作,但RxJS的强大之处就在于除了这些,你甚至还有retry可以用,只要轻松加上这个,就能够有自动重试的功能。

相关的应用场景还有很多,只要是跟API 有关连的几乎都可以用RxJS 很优雅的解决。

React + Redux 的非同步解决方案:redux-observable

这是我们今天的最后一个主题了,也是我开场所提到的。

React + Redux 这一套非常常见的组合,一直都有一个问题存在,那就是没有规范非同步行为(例如说API)到底应该怎么处理。而开源社区也有许多不同的解决方案,例如说redux-thunk、redux-promise、redux-saga 等等。

我们前面讲了这么多东西,举了这么多范例,就是要证明给大家看Reactive programming很适合拿来解决复杂的非同步问题。因此,Netflix就开源了这套redux-observable,用RxJS来处理非同步行为。

在了解RxJS之后,可以很轻松的理解redux-observable的原理。

在redux 的应用里面,所有的action 都会通过middleware,你可以在这边对action 做任何处理。或者我们也可以把action 看做是一个Observable,例如说:

  1. // 范例而已
  2. Rx.Observable.from(actionStreams)
  3. .subscribe( action => {
  4. console .log(action.type, action.payload)
  5. })

有了这个以后,我们就可以做一些很有趣的事情,例如说侦测到某个action 的时候,我们就发送request,并且把response 放进另外一个action 里面送出去。

  1. Rx.Observable.from(actionStreams)
  2. .filter( action => action.type === 'GET_USER_INFO' )
  3. .switchMap(
  4. action => Rx.Observable.from(API.getUserInfo(action.payload.userId))
  5. )
  6. .subscribe( userInfo => {
  7. dispatch({
  8. type : 'SET_USER_INFO' ,
  9. payload : userInfo
  10. })
  11. })

上面就是一个简单的例子,但其实redux-observable已经帮我们处理掉很多东西了,所以我们只要记得一个概念:

action in, action out

redux-observable是一个middleware,你可以在里面加上很多epic,每一个epic就是一个Observable,你可以监听某一个指定的action,做一些处理,再转成另外一个action。

直接看程代码会比较好懂:

  1. import Actions from './actions/user' ;
  2. import ActionTypes from './actionTypes/user'
  3. const getUserEpic = action$ =>
  4. action$.ofType(actionTypes.GET_USER)
  5. .switchMap(
  6. action => Rx.Observable.from(API.getUserInfo(action.payload.userId))
  7. ).map( userInfo => Actions.setUsers(userInfo))

大概就是像这样,我们监听一个action type(GET_USER),一接收到的时候就发送request,并且把结果转为setUsers这个action,这就是所谓的action in, action out。

这样的好处是什么?好处是明确制定了一个规范,当你的component 需要资料的时候,就送出一个get 的action,这个action 经过middleware 的时候会触发epic,epic 发request 给server 拿资料,转成另外一个set 的action,经过reducer 设定资料以后更新到component 的props。

可以看这张流程图:

总之呢,epic就是一个Observable,你只要确保你最后回传的东西是一个action就好,那个action就会被送到reducer去。

碍于篇幅的关系,今天对于redux-observable只是概念性的带过去而已,没有时间好好示范,之后再来找个时间好好写一下redux-observable的实战应用。

结论

从一开始的阵列讲到Observable,讲到画图的范例再讲到经典的Auto Complete,最后还讲了redux-observable,这一路的过程中,希望大家有体会到Observable在处理非同步行为的强大之处以及简洁。

这篇的目的是希望能让大家理解Observable 大概在做什么,以及介绍一些简单的应用场景,希望能提供一篇简单易懂的中文入门文章,让更多人能体会到Observable 的威力。

参考资料:

  • 30天精通RxJS (01):认识RxJS

  • Reactive Programming简介与教学(以RxJS为例)

  • The introduction to Reactive Programming you’ve been missing

  • 构建流式应用—RxJS详解

  • Epic Middleware in Redux

  • Combining multiple Http streams with RxJS Observables in Angular2

视频:

  • Netflix JavaScript Talks - RxJS + Redux + React = Amazing!

  • RxJS Quick Start with Practical Examples

  • RxJS Observables Crash Course

  • Netflix JavaScript Talks - RxJS Version 5

  • RxJS 5 Thinking Reactively | Ben Lesh

关于本文
作者:@huli
原文:https://blog.techbridge.cc/2017/12/08/rxjs/

最后,为你推荐

【第1338期】利用StoryBook开发UI组件管理

【第1335期】这个控件叫:Skeleton Screen/加载占位图