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 
  }
复制代码

但愿能够对可爱的大家有帮助哦🙂笔芯~