美文网首页
RxJS异步数据流

RxJS异步数据流

作者: OOM_Killer | 来源:发表于2019-05-12 19:19 被阅读0次

    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<string> {
        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<string>( (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高阶函数一样。

    相关文章

      网友评论

          本文标题:RxJS异步数据流

          本文链接:https://www.haomeiwen.com/subject/tancaqtx.html