常见的异步编程的几种方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了常见的异步编程的几种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

回调函数
Promise
Rxjs

1、回调函数

 1  /* 利用回调函数执行异步操作 */
 2   getCallBackData(callback) {  // 把函数作为参数传递进去
 3     setTimeout(() => {
 4       let data = 'this is callback data';
 5       callback(data);  // 将异步数据作为参数传递给函数
 6     }, 1000)
 7   }
 8 
 9 
10 /* 函数的调用----获取 callback data */
11   this.getCallBackData((result) => {
12     console.log(result);  // 回调函数只能在传入函数（参数）中处理
13   });

2、Promise

 1 /* Promise */
 2 getPromiseData() {
 3     return new Promise((resolve, reject) => {  
 4       setTimeout(() => {
 5         const data = 'this is Promise data';
 6         resolve(data); // 将异步数据及相关操作封装在 Promise对象中，通过resolve返回
 7       }, 3000)
 8     })
 9   }
10 
11 
12 /*  获取 promise data */
13 const promiseData = this.getPromiseData()
14 promiseData.then(x => {
15     console.log(x);
16   })

3、Rxjs

 1 /* rxjs */
 2 getRxjsData() {
 3   return new Observable(observer => {
 4     setTimeout(() => {
 5       const data = 'this is rxjs data';
 6       observer.next(data);  // 将异步数据及相关操作封装在 Observable 中，通过next返回
 7     }, 3000);
 8   })
 9 }
10 
11 
12  /* 获取 rxjs data */ 
13 const rxjsData = this.request.getRxjsData();
14 const stream = rxjsData.subscribe(x => { // 将 subscribe 返回的subscription赋值给一个变量，取消订阅要通过返回的subscription来取消
15     console.log(x);
16   });

注意：不管是通过 Promise 的 resolve返回，还是通过 getRxjsData 的 observer 返回，返回的时间用户都不能马上得到，必须分别使用 then 和 subscribe 来订阅

4、Rxjs取消订阅

1 /* 取消订阅 3s后返回rxjs data,但是刚过1s，我想取消，不想订阅了 */
2 setTimeout(() => {
3    stream.unsubscribe();     // promise创建之后动作无法撤回，而Observable可以撤回发出的动作
4  }, 1000)

5、rxjs订阅后多次执行

 1  getMutipleRxjsData() {
 2     return new Observable(observer => {
 3       let count = 0;
 4       setInterval(() => {
 5         observer.next(count++);
 6         // 对于 promise来说，最终结果要么是resolve或者reject,而且都只能触发一次，如果在同一个promise对象上多次调用resolve方法，则会抛出异常
 7         // 而Observable不一样，它可以通过next方法源源不断的触发下一个值
 8       }, 1000);
 9     })
10   }
11 
12 
13 /* rxjs 多次执行 */ 
14 this.getMutipleRxjsData().subscribe(x => {
15       console.log(x);
16     })