RxJS异步数据流

RxJS 是 ReactiveX 编程理念的JavaScript 版本。他是针对异步数据流的编程，简单的说就是将一切数据，包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能够以同步编程的方式处理异步数据，并组合不同的操作符来轻松实现你所需要的功能。
RxJS是一种针对异步数据流工具，Angular引入RxJS就是为了让异步可控、更简单。

常见的异步编程的几种方法

1.回调函数
2.事件监听/发布订阅
3.Promise
4.RxJS

同步和异步的不同

首先这里定义了两个方法，一个是同步，一个是异步。

  getData(): string {
    return '这个是同步方法返回';
  }

  getCallBackData() {
    setTimeout(() => {
      return '这个是回调异步方法返回';
    }, 1000);
  }

如果直接调用的话，第二个getCallBackData() 是打印出了一个undefined，如下图的调用方式

    // 同步调用
    const syncData = this.request.getData();
    console.log(syncData);

    // 异步调用
    const asyncData = this.request.getCallBackData();
    console.log(asyncData);   //打印出undefined

第一种解决方式：回调函数

定义一个回调函数，来等data拿到时再执行并且返回。这里使用的es6的箭头函数，所以看起来比较简洁。

getCallBackData(func: ( value: string) => void) {
    setTimeout(() => {
      func('这个是回调异步方法返回');
    }, 1000);
  }

// 异步调用
this.request.getCallBackData((data: string) => { console.log(data); });

这样就是传进去一个函数参数，让这个函数拿到值再返回。这样就可以打印出异步函数中的数据了。

第二种解决方式：promise

promise返回一个promise 对象，resolve是成功的返回，reject是失败的返回。

getPromiseData(): Promise {
    return new Promise((resolve, reject) => {
      setTimeout( () => {
        resolve('这是Promise的异步方法返回');
        reject('失败了...');
      }, 1000);
    });
  }

// 异步调用 promise 获取
    this.request.getPromiseData().then((data: string) => {
      console.log(data);
    });

第三种解决方式：RxJS

和promise比较类似，但是这里使用的Observable去分发，调用端去订阅。

  getRxJSData() {
    return new Observable((observer) => {
      setTimeout( () => {
        observer.next('这是Rxjs的异步方法返回');
        // observer.error('失败了...');
      }, 1000);
    });
  }

    // 异步调用 rxjs 获取
    this.request.getRxJSData().subscribe( (data) => {
        console.log(data);
    });

rxjs 和 promise 的基础用法比较相似，但是rxjs其实比promise强大的多，比如rxjs可以中途撤回，rxjs可以发射多个值，rxjs提供了多种工具函数。
#######RxJS取消订阅
通过 unsubscribe() 方法来实现超时取消订阅取消订阅，

// 异步调用 rxjs 超过 2s 自动撤回
const stream = this.request.getRxJSData().subscribe( (data) => { console.log(data); });
setTimeout( () => { stream.unsubscribe(); }, 2000);

RxJS多次订阅

每隔1s中再次获取异步方法中的数据。多次执行。

getRxJSIntervalData() {
    let count = 0;
    return new Observable( (observer) => {
      setInterval( () => {
        count++;
        observer.next(`这是RxJS的异步方法返回 ${count}`);
      }, 1000);
    });
  }

// 异步调用 rxjs 每隔 1s 自动触发订阅
this.request.getRxJSIntervalData().subscribe( (data) => {
   console.log(data);
});

RxJS的工具函数

RxJS的工具函数很多，但是这里只举例说明两个，map和filter。

• map 和 filter
  fileter很好理解，就是过滤，而map也好理解，如python的map高阶函数一样。