Rxjs学习与promise的比对

常见的异步编程

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

准备工作

为了方便演示，可新建一个服务为request，最后在app.module中引入及注入该服务。具体见Angular服务的使用
随后在组件中引入该服务

回调函数和promise

同步

服务中：

  getData(): any {
    return 0;
  }

组件中：

    const data = this.request.getData();
    console.log('同步', data);

回调函数

若不使用回调函数，则服务中如下：

  getCallbackData(cb): any {
    setTimeout(() => {
      const username = 'wangyue';
      return username
    }, 1000);
  }

组件中：

console.log(this.request.getCallbackData)

输出结果为undefined。因为setTimeout内是异步的，先执行同步的 getCallbackData(cb): any {setTimeout()}；console.log(this.request.getCallbackData);再执行定时器内语句。同步的时候就以及console了，所以console出来的是undefined。
可用回调函数解决该问题。
服务中：

  getCallbackData(cb): void {
    setTimeout(() => {
      const username = 'wangyue';
      cb(username);
    }, 1000);
  }

组件中：

    // 回调函数解决异步
    this.request.getCallbackData((para) => {
      console.log('callback异步', para);
    });

传入的是一个回调函数，在该函数内做数据处理。

Promise

Promise也可解决异步，避免回调地狱。
服务中：

  // promise解决异步
  getPromiseData(): any{
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const key = '123456';
        resolve(key);
      }, 1000);
    });
  }

组件中：

    const promiseData = this.request.getPromiseData().then((value) => {
      console.log('promise获取异步', value);
    });
  }

RxJS处理异步

服务中

import {Observable} from 'rxjs'; // 引入Obeservable
  // observe解决异步，和promise写法很像
  getRxjsData(): any {
    return new Observable((observe) => {
      setTimeout(() => {
        const admin = 'admin';
        observe.next(admin);
        // observe.error('fail');
      }, 1000);
    });
  }

组件中：

    // rxjs异步，返回的是rxjs对象，写法和promise非常像
 this.request.getRxjsData().subscribe((ad) => {
      console.log('rxjs获取异步, ad');
    });

rxjs在angular已集成，所以无需安装，直接引入
通过返回对象的subscribe获得数据
用法和promise很像
rxjs相比promise更强大
提供多种工具函数

Rxjs unsubscribe中途撤回

promise无法中途撤回，rxjs可以。
例如：显现过一秒撤回操作。
首先将之前服务中的getRxjsData中定时器的事件改为3000ms
随后改外部，组件中

    const stream = this.request.getRxjsData(); // observe对象
    const d = stream.subscribe((ad) => {
      console.log('rxjs获取异步, ad');
    });
    setTimeout(() => {
      d.unsubscribe(); // 取消订阅
    }, 1000);
  }

查看控制台发现不打印，因为取消了

Rxjs订阅后多次执行

例如要求：每隔两秒钟返回一次数据，如果用promise只执行一次，rxjs有该功能。
服务中

  getMutiRxjsData(): any {
    return new Observable((observe) => {
      setInterval(() => {
        const city = 'beijing';
        observe.next(city);
      }, 1000);
    });
  }

组件中

    this.request.getMutiRxjsData().subscribe((city) => {
      console.log('多次获得数据', city);
    });

可以的，promise无法封装一个源源不断执行的方法。

Rxjs的工具函数

Angular6之前的方法有map和filter，在angular6以后使用rxjs以前的方法要安装rxjs-compat模块。
map和filter是对返回数据进行处理。
这里不详细说了，用es6也可处理。