8 Rxjs 异步数据流编程

8.1 Rxjs介绍

参考手册：https://www.npmjs.com/package/rxjs
中文手册：https://cn.rx.js.org/
RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软，`它是一种针对异步数据 流的编程。简单来说，它将一切数据，包括 HTTP 请求，DOM 事件或者普通数据等包装成流 的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据， 并组合不同的操作符来轻松优雅的实现你所需要的功能。
RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其目 标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。
RxJS 里面提供了很多模块。这里我们主要给大家讲 RxJS 里面最常用的 Observable 和 fromEvent。
目前常见的异步编程的几种方法：
1、回调函数 2、事件监听/发布订阅 3、Promise 4、Rxjs

8.2 回调函数异

创建一个服务定义方法：

getCallbackData(cb){
  setTimeout(()=>{
    var data = '张三';
    cb(data);
  },1000)
}

.ts文件

// 2、callback(回调函数)获取异步数据
this.request.getCallbackData((data)=>{
     console.log(data)
});

8.3 promise方法获取数据

getPromiseData(){
  return new Promise((resolve,reject)=>{
   setTimeout(()=>{
      var data = '李四---promise';
      resolve(data)
   },3000)
 })
}
// 3、Promise方法获取异步数据
var promiseData = this.request.getPromiseData();
promiseData.then((data)=>{
    console.log(data)
})

8.4 rxjs 方法获取异步方法里面的数据及与promise区别

定义服务：

getRxjsData(){
    return new Observable((observe)=>{
      setTimeout(()=>{
        var data = '李四---Rxjs';
        observe.next(data)
      },3000)
    })
  }

  // 多次执行
  getPromiseIntervalData(){
    return new Promise((resolve,reject)=>{
      setInterval(()=>{
        var data = '李四---promise setInterval';
        resolve(data)
      },1000)
    })
  }

  getRxjsDataIntervalData(){
    let count = 0
    return new Observable((observe)=>{
      setInterval(()=>{
        count ++
        var data = '李四---Rxjs'+count;
        observe.next(data)
      },3000)
    })
  }

  getRxjsInterNum(){
    let count = 0
    return new Observable((observe)=>{
      setInterval(()=>{
        count ++
        observe.next(count)
      },3000)
    })
  }

.ts文件使用

// 4、rxjs 方法获取异步方法里面的数据
      // var rxjsData = this.request.getRxjsData();
      // 订阅
      // rxjsData.subscribe((data)=>{
      //   console.log(data)
      // })

      // 5、rxjs取消订阅 过一秒以后撤回刚才的操作
      var streem = this.request.getRxjsData();

      var d = streem.subscribe((data)=>{
        console.log(data)
      })
      setTimeout(()=>{
        // 取消订阅
        d.unsubscribe();
      },1000)

      // 6、promise执行多次（没有这个能力）
      var intervalPromiseData = this.request.getPromiseIntervalData()
      intervalPromiseData.then((data)=>{
        console.log(data)
      })

      // 7、rxjs执行多次 (可以执行)
      // var streemInter = this.request.getRxjsDataIntervalData();
      // streemInter.subscribe((data)=>{
      //   console.log(data)
      // })

      // 8、用工具方法对返回的数据进行处理 filter
      // var streemNuum = this.request.getRxjsInterNum();
      // streemNuum.pipe(
      //   filter((value:number)=>{
      //     if(value%2 == 0){
      //       return true;
      //     }
      //   })
      // ).subscribe((data)=>{
      //   console.log(data)
      // })

      // 9、用工具方法对返回的数据进行处理 map
      // var streemNuum = this.request.getRxjsInterNum();
      // streemNuum.pipe(
      //   map((value:number)=>{
      //       return value*3;
      //   })
      // ).subscribe((data)=>{
      //   console.log(data)
      // })

      // 10、结合使用
      // var streemNuum = this.request.getRxjsInterNum();
      // streemNuum.pipe(
      //   filter((value:number)=>{
      //     if(value%2 == 0){
      //       return true;
      //     }
      //   }),
      //   map((value:number)=>{
      //           return value*3;
      //   })
      // ).subscribe((data)=>{
      //   console.log(data)
      // })