《响应式编程（Reactive Programming）介绍》文章总结与案例分析-CSDN博客

最近一直在研究响应式编程,读到一篇文章响应式编程（Reactive Programming）介绍,由极客学院翻译的,非常感谢极客学院!

英文原文The introduction to Reactive Programming you've been missing.

文章较长,仔细研究了这篇文章,提炼一些东西和总结一下自己的实践与理解.

1.思维转变:一切皆对象=>一切皆流

我理解的流:一段时间内的不同状态. 字符串、数字、事件、请求等等,一切都是可以转化成流

from、of等方法创建的流,也是一个流,只是这个流中只有一种状态,

2.流也有不同

1:发射完数据更新自动关闭：from, fromPromise, of, range 2:保持发射数据且不自动关闭：timer, interval, fromEvent 3:需要手动发射数据且不自动关闭：create 4:不发射直接关闭：empty 5:抛出异常后关闭：throw 6:不发射数据也不关闭：never

不关闭的流就需要手动执行unsubscribe,有一些框架已经帮你自动关闭了一些流,比如Angular中AsyncPipe在组件销毁的时候会自动取消订阅,参考:Angular 中何时取消订阅

此处有疑问,还请高手指教:在Angular中怎么从源码中找出此处需要手动执行unsubscribe还是自动?是看源码中有在ngOndestory的时候是否执行了unsubscribe吗? 不甚感激!

3.设计流的时候也可以反向推理,从最终获取的数据往前一步,正反向结合

比如文章中 suggestion1Stream=>responseStream=>requestStream

4.尝试画rxjs数据流向图,来整理设计流;看懂rxjs交互图

比如

refreshClickStream: ----------o---------o---->
     requestStream: -r--------r---------r---->
    responseStream: ----R----------R------R-->   
    suggestion1Stream: -N--s-----N----s----N-s-->
    suggestion2Stream: -N--q-----N----q----N-q-->
    suggestion3Stream: -N--t-----N----t----N-t--> 
复制代码

 source1: ————————①——————————②——————————③————————————④—————————⑤——————————|——>
 source2: ———————————ⓐ————————ⓑ————————————ⓒ—————————————————————ⓓ—————————|——>
                combineLastest(source1, source2, (x, y) => x + y)
 source:  ———————(①ⓐ)—(②ⓐ)—(②ⓑ)—————(③ⓑ)—(③ⓒ)———(④ⓒ)————(⑤ⓒ)—(⑤ⓓ)——|——>
复制代码

5.文章案例实践及分析

1)初始化页面和点击刷新获取数据

 var refreshButton = document.querySelector('.refresh');
       var closeButton1 = document.querySelector('.close1');

       var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
       var requestStream = refreshClickStream.startWith('fff')
           .map(function() {
               var randomOffset = Math.floor(Math.random() * 500);
               console.log(11)
               return 'https://api.github.com/users?since=' + randomOffset;
           })

       var responseStream = requestStream.flatMap(function(requestUrl) {
         console.log(requestUrl)
           return Rx.Observable.fromPromise($.getJSON(requestUrl));
       })

       responseStream.subscribe(function (response) {
         console.log(response)
       })
复制代码

responseStream订阅的时候,数据来源于requestStream,requestStream执行操作符startWith('fff'),即requestStream中发射了一次数据,数据再经过map(获取请求地址)=>flatmap(获取到请求的数据).

注意:文中首先把startWith放在map操作符后,这是两种不同的数据流了

后者初始化页面时时,requestStream来自于点击刷新流,此时未点击,因为map无数据,所以startWith加在map后面时,需要的参数是请求的地址,以用来执行flatMap

2)渲染第一行数据

var refreshButton = document.querySelector('.refresh');
       var closeButton1 = document.querySelector('.close1');

       var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
       var requestStream = refreshClickStream.startWith('fff').map(function() {
           var randomOffset = Math.floor(Math.random() * 500);
           console.log(11)
           return 'https://api.github.com/users?since=' + randomOffset;
       })

       var responseStream = requestStream.flatMap(function(requestUrl) {
           console.log(requestUrl)
           return Rx.Observable.fromPromise($.getJSON(requestUrl));
       })

       var suggestion1Stream = responseStream.map(function(listUsers) {
           return listUsers[Math.floor(Math.random() * listUsers.length)];
       }).merge(refreshClickStream.map(function(event) {
           console.log(event) // click的event
           return null;
       }))

       suggestion1Stream.subscribe(function(aa) {
           console.log(aa) // output:首先null,请求到数据后=response
       })
复制代码

反向推数据流: suggestion1Stream=>responseStream=>requestStream=>refreshClickStream merge操作符,使suggestion1Stream数据来源于2个,点击的时候首先merge refreshClickStream,返回是空,所以立即清空数据,待请求成功后获取到数据再赋值成功.

3)更换本行推荐

var refreshButton = document.querySelector('.refresh');
        var closeButton1 = document.querySelector('.close1');

        var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
        var close1ClickStream = Rx.Observable.fromEvent(closeButton1, 'click');

        var requestStream = refreshClickStream.startWith('fff')
            .map(function() {
                var randomOffset = Math.floor(Math.random() * 500);
                console.log(11)
                return 'https://api.github.com/users?since=' + randomOffset;
            })

        var responseStream = requestStream.flatMap(function(requestUrl) {
            console.log(requestUrl)
            return Rx.Observable.fromPromise($.getJSON(requestUrl));
        })

        suggestion1Stream = close1ClickStream.combineLatest(responseStream, function(event, listUsers) {
          console.log(event)
            return listUsers[Math.floor(Math.random() * listUsers.length)];
        }).merge(refreshClickStream.map(function() {
            return null;
        })).startWith('null')

        suggestion1Stream.subscribe(function(data) {
            console.log(data)
        })
复制代码