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)         })

 


 

上一篇:javascript – RxJs管道和lettable运算符`map`:’this’类型的’this’上下文不能赋值给’Observable <{}>'类型的方法'


下一篇:javascript – 如何使用Angular Http Interceptor和RxJS刷新JWT令牌?