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