等待Promise，然后从for循环中调用另一个promise-Angular

Question

Problem: I need to call an API one after the other from inside the for loop. I need to wait for former API to resolve before calling the latter one.

I am calling a Get API inside a for loop which generate Document on server side , as shown below

 async ExtendedMethod() {
    let MList: PendingListMemberWise[] = [];
    for (let i = 0; i < this.MemberList.length; i++) {
      if (this.MemberList[i].checked) {
        MList.push(this.MemberList[i]);
      }
    }
    this.ShowLoader = true;
    for (let i = 0; i < MList.length; i++) {
      this.lblText = "Generating PDF " + i + "/" + MList.length;
    await this.callGeneratePDFAPI(MList[i]);
    }
    this.lblText = "PDF Generation Completed";
    this.GetBranchList();
    this.ShowLoader = false;
    //this.appconfig.Message="PDF Files have been Generated , Use the Download PDF Link to Download Them";
  }

And

 callGeneratePDFAPI(mcodeList: PendingListMemberWise) {
    return new Promise((resolve, reject) => {
      var url = this.baseurl + 'api/GeneratePDF/GeneratePDF/' + mcodeList.memberCode + '/' + sessionStorage.getItem("UserID");
      this.http.get(url)
        .subscribe(result => {
          var index = this.MemberList.indexOf(mcodeList);
          if (index > -1) {
            this.MemberList.splice(index, 1);
          }
        }, error => {
          console.error(error);
        });
      resolve();
    })
  }

when I call callGeneratePDFAPI() inside foor loop and send parameter one by one than it hit the API in Async , Means it does not wait for first call to finish before making another http call ,

Idea to solve this was to use promise as

    TestMethod() {
    try {
      return new Promise((resolve, reject) => {
        //Some Code here
        resolve();
      })
    } catch (error) {
      console.log(error);
    }
  }

And then

 this.TestMethod()).then(() => {
      //Another task to do after TestMethod return 
    });

But how can I use it inside for loop , I have to make request 10 times so I can show user that out of 10 , n number of document has been created .

How to use sync api call instead of by default async call in angular

Update 1

ExtendedMethod() {
let MList: PendingListMemberWise[] = [];
for (let i = 0; i < this.MemberList.length; i++) {
  if (this.MemberList[i].checked) {
    MList.push(this.MemberList[i]);
  }
}
this.ShowLoader = true;
var promises = [];
for (let i = 0; i < MList.length; i++) {
  this.lblText = "Generating PDF " + i + "/" + MList.length;
  promises.push(this.callGeneratePDFAPI(MList[i]));
}
Promise.all(promises)
  .then((response) => {console.log('All Done') });
this.lblText = "PDF Generation Completed";
this.GetBranchList();
this.ShowLoader = false;
//this.appconfig.Message="PDF Files have been Generated , Use the Download PDF Link to Download Them";

}

Answer 1

You can use async/await.

**async** ExtendedMethod() {
    let MList: PendingListMemberWise[] = [];
    for (let i = 0; i < this.MemberList.length; i++) {
      if (this.MemberList[i].checked) {
        MList.push(this.MemberList[i]);
      }
    }
    this.ShowLoader = true;
    for (let i = 0; i < MList.length; i++) {
      this.lblText = "Generating PDF " + i + "/" + MList.length;
      **await** this.callGeneratePDFAPI(MList[i]);
    }
    this.lblText = "PDF Generation Completed";
    this.GetBranchList();
    this.ShowLoader = false;
    //this.appconfig.Message="PDF Files have been Generated , Use the Download PDF Link to Download Them";
  }

  callGeneratePDFAPI(mcodeList: PendingListMemberWise) {
    var url = this.baseurl + 'api/GeneratePDF/GeneratePDF/' + mcodeList.memberCode + '/' + sessionStorage.getItem("UserID");
    const service = this.http.get(url).toPromise();
    service.then(result => {
        var index = this.MemberList.indexOf(mcodeList);
        if (index > -1) {
          this.MemberList.splice(index, 1);
        }
      })
      .catch(error => {
        console.error(error);
      });
      return service;
  }

Answer 2

Update 1:-

To make requests synchronously, try the below idea.

 [1,2,3,4,5].reduce((acc, element, index) => { return acc.then(() => { console.log('Generating PDF: ', index + 1); return callGeneratePDFAPI(); }) }, Promise.resolve()); function callGeneratePDFAPI(){ return new Promise((resolve) => { setTimeout(()=> { resolve(); }, 2000) }) }; 

---

You can use Promise.all method.

Run your for loop and collect promises in an array promises . Then call the below code:-

var promises = [];

<your_array>.forEach(element => {
  // push into promises
})
Promise.all(promises)
  .then((response) => {});

For a live example, refer here

---

Please note then will fire once all the promises resolve and you will get all the data in an array. If any of the promise rejects, then you need to catch it.