Angular Http forEach 中的请求，等待完成请求直到继续循环

Question

I am looping through selected files, in order to first get a signed url and then put it directly to a S3 bucket. My Problem now is, that I want to wait until everything inside the forEach has finished, and then continue looping.

What I am experiencing now is that the code directly queries for a signed url for each file at the same moment.

Thanks for any help

result['files'].forEach(file => {
    this.fileService.getSignedURL(this.vehicleId, file.name, file.type, file.size)
       .then(res => {
          this.pushFile(file, app, description, languageKey, file.name, res.path, res.signed_url)
       });
});

Answer 1

I presume the observable from getSignedURL() is converted to a promise using toPromise() . If so remove it and return it as an observable.

Then you could map the elements in the array to the observable using Array#map , use RxJS from function along with concatMap operator to trigger both the requests for the elements sequentially.

Try the following

from(
  result['files'].map((file) =>
    this.fileService.getSignedURL(this.vehicleId, file.name, file.type, file.size).pipe(
      concatMap((res) => 
        this.pushFile(file, app, description, languageKey, file.name, res.path, res.signed_url)
      )
    )
  )
).subscribe({
  next: res => { },
  error: error => { }
});