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 
  }
複製代碼

但願能夠對可愛的大家有幫助哦🙂筆芯~