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