随笔- 77 文章- 1 评论- 0 阅读- 71874

angularJS -- RXJS 的用法

JS -- 获取异步数据的方式：

　　1. 回调函数

　　2. Promise

　　3. 事件订阅

　　4. RxJS -- V6.0 +

1. 回调函数方式获取异步数据

延时器模拟异步数据：

getCallData(cb) {
    setTimeout(() => {
      var userName = "ABC"
      cb && cb(userName)
    }, 1000);
  }

调用：

　　　　/*
            回调函数获取异步数据
        */
        this.request.getCallData((data: any)=>{
            console.log(data, "回调函数方式获取异步数据")
        })

2. Promise 获取异步数据

promise 对象 resolve 数据，reject 返回错误：

 getPromiseData() {
    return new Promise((resolve, reject)=>{
      setTimeout(() => {
        var userName = "promise-data"
        resolve(userName)
　　　　 reject(err)
      }, 1000);
    })
  }

调用：

　　　　/*
            Promise 获取异步数据
        */
        let promiseData = this.request.getPromiseData()
        promiseData.then((data)=>{
            console.log("promise 获取异步数据:", data)
        })

3. Rxjs 获取异步数据

定义方法时，return 出一个 Observable 对象，通过 .next(data) 抛出数据， .error(错误信息) 抛出错误

import { Observable } from 'rxjs'
 
getRxjsData() {
    return new Observable((observer)=>{
      setTimeout(() => {
        var userName = "RXJS-data"
        observer.next(userName)
      }, 3000);
      
    })
  }

调用-接收时，通过 subscribe 订阅：

 　　　　/*
            RXjs 获取异步数据
        */
        let rxjsData = this.request.getRxjsData()
        let d = rxjsData.subscribe((data)=>{
            console.log("rxjs 获取异步数据", data)
        })

Promise 和 rxJS 对比：

1. promise 方式，不能中断。而RxJs方式可以打断

实例：

 　　　　/*
            RXjs 获取异步数据
        */
        let rxjsData = this.request.getRxjsData()
        let d = rxjsData.subscribe((data)=>{
            console.log("rxjs 获取异步数据", data)
        })
        // rxjs 订阅取消 - 1秒后打断，不返回数据
        setTimeout(()=>{
            // d.unsubscribe()
        }, 1000)

2. interVal 多次执行 promise 只能执行一次，而 RxJS 可以多次执行

promise interval 实例:

定义：

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

调用：

 /**
         * 多次执行promise, 只执行一次
         */
        let promiseIntervalData = this.request.getPromiseIntervalData()
        promiseIntervalData.then((data)=>{
            console.log("promise-interval 获取异步数据:", data)
        })

RxJS interval 实例:

定义：

 // 多次执行 rxjs
  getRxjsIntervalData() {
    return new Observable((observer)=>{
      setInterval(() => {
        var userName = "RXJS-data-interval"
        observer.next(userName)
      }, 1000);
      
    })
  }

调用：

　　　　/**
         * 多次执行rxjs, 正常执行
         */
        let rxjsIntervalData = this.request.getRxjsIntervalData()
        rxjsIntervalData.subscribe((data)=>{
            console.log("RXJS-interval 获取异步数据:", data)
        })

angular 中的 rxjs 的工具函数 -- filter, map

申明：

　
import { Observable } from 'rxjs'
// rxjs 申明 Observable 对象
  getRxjsUtilsData() {
    let count = 0
    return new Observable((observer)=>{
      setInterval(() => {
        count++
        observer.next(count)
      }, 1000);
    })
  }

工具方法的使用：

　　　　　　import { filter,map } from 'rxjs/operators'
　　　　
　　　　/*
            rxjs 提供的工具方法-filter
        */
        let stream = this.request.getRxjsUtilsData()
        stream.pipe(
            filter((value: any)=>{
                if(value%2==0) {
                    return true
                }
            })
        ).subscribe((data)=>{
            console.log("RXJS-filter数据:", data)
        })
      
        /*
            rxjs 提供的工具方法-map
        */
        let stream = this.request.getRxjsUtilsData()
        stream.pipe(
            map((value: any)=>{
                return value*value
            })
        ).subscribe((data)=>{
            console.log("RXJS-map数据:", data)
        })
        /* 
            rxjs 提供的工具方法-map,filter 管道连写
        */
        let stream = this.request.getRxjsUtilsData()
        stream.pipe(
            filter((value: any)=>{
                if(value%2 == 0) {
                    return true
                }
            }),
            map((value: any)=>{
                return value*value
            })
        ).subscribe((data)=>{
            console.log("RXJS-工具方法处理数据:", data)
        })