angularJS -- RXJS 的用法

Posted 2022-12-16 monkey-k

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)

        )

 

---