Angular 如何在循环中Call API

最近在做Angular项目中遇到一个关于如何在一个循环中依次call api的问题，由于call api都是异步的，当在循环中调用异步的api会出现同步的循环已经结束，但是调api还未结束的情况~

划重点~

解决方案所用到的主角：

• for...of： for…of循环可以代替数组实例的forEach方法，不同于forEach方法，它可以与break、continue和return配合使用
• async/await: 让代码看起来更像同步

下面通过改造前和改造后的代码进行比较并深入了解~

改造前
 submit = () => {
    const result = [];
    this.data.forEach((item, index) => { // 这是最初的在循环中去依次call api
      result.push(item);
      if (item.flag) {
        this.test(item).subscribe(res => { // 由于请求是异步的，导致循环已结束，请求还没有完成 ☹️
          console.log(res)
    });
  }

  test(data): any {
    return this._testService.getTestData({ id: data.id })
  }
复制代码

改造后
async submit() {
    const result = [];
    let index = 0;
    for (let item of this.data) { // 使用for of进行循环
      result.push(item);
      if (item.flag) {
        // 使用 async/await await从字面意思上是“等待”的意思，就是用于等待异步完成
        const res = await this.getSkinTestOrder(item); 
        console.log(res);
      }
      index++；// 手动控制循环的进行
    }
  }

  async test(data) {
    return await  this._testService.getTestData({ id: data.id }).toPromise(); 
    // async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么就是什么) 
    // await得到Promise对象之后就等待Promise接下来的resolve或者reject 
  }
复制代码

希望可以对可爱的你们有帮助哦?笔芯~