在循环内使用 Async Await

Question

I have encountered a problem where i have to send some JSON data stored in an array to the server. The problem is loop just run to the next iteration without waiting to get response from the server. I Don't want to use Time out Cause i can not preJudge the response time of the server.

 async  uploadResponces(responseList) {
var idList = responseList;

for (let i = 0, j = 1; i < idList.length; i++ , j++) {
  var newArray = JSON.parse(idList[i].response)

  await this.apiConnect.postResponseTwo('submitform', newArray).then((data) => {
    self.submitStatus = data;
    alert(JSON.parse(this.submitStatus))
    if (this.submitStatus.status == "success") {
      alert(idList[i].id)
      var topush = JSON.stringify(idList[i].id)
      this.submited.push(idList[i].id)
      if (j == idList.length) {
        alert("submited array" + this.submited)
        this.deleteresponse()
      }
    }
  }).catch((errr)=>alert(JSON.stringify(errr)))
 }
}

the apiconnect.postResponseTwo is-

postResponseTwo(endpoint: string, body: any, reqOpts?: any) {
return new Promise((resolve, reject) => {
  console.log("post responce function");
  let httpHeaders = new HttpHeaders({
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, DELETE, PUT',
    'Access-Control-Allow-Headers': 'Accept,Accept-Language,Authorization,Content-Language,Content-Type',
    'Access-Control-Expose-Headers': 'Content-Length,Content-Range',

  });

  reqOpts = {
    headers: httpHeaders
  };
  let getURL = this.formUrl + endpoint;
  alert(endpoint + reqOpts);
  alert("url " + getURL);
  alert("passing object " + body);
  this.http.post(getURL, body, reqOpts).map((data) => {
    resolve(data)
    // alert("from server " + JSON.stringify(data));
    //  alert(JSON.stringify(data))

  }, err => {
    alert("error " + JSON.stringify(err));
  })
 });
}

here the function postResponse is sending data to the server inside a loop but if(j==idList.length){ is not waiting to get the response from server .

Answer 1

If .subscribe really returns a promise then you should definitely use Promise.all instead of a loop. All promises are invoked at the same time and run in parallel. Promise.all is resolved only when the last promise in the given array is resolved. Due to parallel execution it's a way better solution than running a loop – unless you depend on execution order, but then you'd need to chain your promises and would not be able to loop anyway.

So, first create an array of promises kind of like this (I have not tested this code, so it might contain typos):

// create an array of promises
const responsePromises = map((idItem) => {
  const newArray = JSON.parse(idList[i].response);
  return this.apiConnect.postResponse('submitform', newArray).subscribe((data) =>
  {
     // whatever needs to be processed here
  });
});

// execute promises in parallel either:
Promise.all(responsePromises)
  .then(results => {
    // result handling
  })
  .catch(err => {
    // error handling
  });

// or with async/await but then your enclosing
// function must be async
const results = await Promise.all(responsePromises);

Your question was not detailed and sufficiently specified, so my answer might not really match what you've hoped for.

Answer 2

You are mixing async/await and rx. You actually can do that (but you probably should not), since Observables have a toPromise() method, and you can await the resulting Promise. But subscribe() does NOT return a Promise, it returns a Subscription. A Subscription is used to unsubscribe, is no Promise and thus NOT awaitable.