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

 

---