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