JS - 非同期データモードを取得します：
1.コールバック関数
2.約束
3.イベント・サブスクリプション
4. RxJS - V6.0 +
1.非同期データモードコールバックをゲット
アナログ遅延非同期データ：
getCallData （CB ）{
setTimeout （（） => {
VaRのuserNameの= "ABC"
CB && CB （userNameに）
}、 1000年）。
}
コール：
/ *
非同期データを取得するためのコールバック関数
* /
これ。リクエスト。getCallData （（データ：任意）=> {
コンソール。ログ（データ、 「非同期のデータ取得モードをコールバック」）
}）
2.約束は、非同期データを取得します
約束は、データを解決するオブジェクト、エラーを返します拒否します：
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)
})