angular6 中使用 async-await

angular6 中使用 async-await

以异步请求为例

1.不用 async-await 时

//获取附件信息
console.log('start');
this.refFileService.queryPageList(param).subscribe(data1=>{
  console.log('data1：',data1);
  if(data1 && data1.code == 200){
  	//第一个请求结束之后，由于要用到这个结果才能进行第二个请求（这里偷懒，两个请求一样的）
  	this.refFileService.queryPageList(param).subscribe(data2=>{
  		console.log('data2：',data2);
  	})
  }
})
console.log('end');

打印结果：

这里就是正常的异步操作

2.使用 async-await 时

async get1(){
    console.log('start');
    //查询附件表
    let param = {
      pageSize:0,
      objectId:this.objectId,
      code:this.fileCode
    }
    let data2 = await this.refFileService.queryPageList(param).toPromise()
    let data3 = await this.refFileService.queryPageList(param).toPromise()
    console.log('data2：',data2,'-----data3：',data3);
    console.log('end');
}

this.get1()

注意：使用 async-awit 时需要注意的是：

1. await 后面需要返回一个 Promise，所以要把请求的返回的 Observable<T> 类型转化为 Promise 类型；使用 toPromise() 操作符
2. 使用时， await 不能在 async 外面，不然会报错

打印结果：

这里可以看到，是等待两个请求结束之后，才运行的 console.log(‘end’)；代码的可读性也比不用async-awit要好

可以使用 async 和 await 解决 回调地狱 问题

const printData = async function (filepath) {
   let keyword = await readFile(filepath);
   let count = await queryDB(keyword);
   let data = await getData(res.length);
   console.log(data);
});
printData('./sample.txt');

3.subscribe和 toPromise ()的区别

请求后面，我们一般使用 subscribe 来获取结果，subscribe 方法来自 Observable 对象；一旦订阅，subscribe 回调将在 Observer 产生新数据时执行。那么当使用了 toPromise() 操作符把请求的返回的 Observable<T> 类型转化为 Promise 类型后，使用 .then() 回调处理器最多只能执行一次。因此，除非您需要使用重复数据，否则不要使用 subscribe 。使用 toPromise ()

//from(iterable) —— 把它的参数转换成一个 Observable 实例。 该方法通常用于把一个数组转换成一个（发送多个值的）可观察对象。
const myObservable2 = from([1, 2, 3]);  
const myObserver2 = myObservable2.subscribe(res=>{
  console.log('使用subscribe订阅的结果：',res);
})

const myObserver3 = myObservable2.toPromise().then(res=>{
  console.log('使用toPromise转化的结果：',res);
})

打印结果：