常见的异步编程的几种方法
1、回调函数
/* 利用回调函数执行异步操作 */
getCallBackData(callback) { // 把函数作为参数传递进去
setTimeout(() => {
let data = 'this is callback data';
callback(data); // 将异步数据作为参数传递给函数
}, 1000)
}
/* 函数的调用获取 callback data */
this.getCallBackData((result) => {
console.log(result); // 回调函数只能在传入函数（参数）中处理
});2、Promise
/* Promise */
getPromiseData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = 'this is Promise data';
resolve(data); /*将异步数据及相关操作封装在 Promise对象中，通过resolve返回*/
}, 3000)
})
}
/* 获取 promise data */
const promiseData = this.getPromiseData()
promiseData.then(x => {
console.log(x);
})3、Rxjs
/* rxjs */
getRxjsData() {
return new Observable(observer => {
setTimeout(() => {
const data = 'this is rxjs data';
observer.next(data); /* 将异步数据及相关操作封装在 Observable 中，通过next返回*/
}, 3000);
})
}
/* 获取 rxjs data */
const rxjsData = this.request.getRxjsData();
const stream = rxjsData.subscribe(x => { /*将 subscribe 返回的subscription赋值给一个变量，取消订阅要通过返回的subscription来取消*/
console.log(x);
});注意：不管是通过 Promise 的 resolve返回，还是通过 getRxjsData 的 observer 返回，返回的时间用户都不能马上得到，必须分别使用 then 和 subscribe 来订阅
4、Rxjs取消订阅
/* 取消订阅 3s后返回rxjs data,但是刚过1s，我想取消，不想订阅了 */
setTimeout(() => {
stream.unsubscribe(); /*promise创建之后动作无法撤回，而Observable可以撤回发出的动作*/
}, 1000)
5、rxjs订阅后多次执行
getMutipleRxjsData() {
return new Observable(observer => {
let count = 0;
setInterval(() => {
observer.next(count++);
/*对于 promise来说，最终结果要么是resolve或者reject,而且都只能触发一次，如果在同一个promise对象上多次调用resolve方法，则会抛出异常*/
/*而Observable不一样，它可以通过next方法源源不断的触发下一个值*/
}, 1000);
})
}
/* rxjs 多次执行 */
this.getMutipleRxjsData().subscribe(x => {
console.log(x);
})本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
