Angular 从以前调用的方法获得响应后如何调用方法

我正在尝试将文件数组保存到spring引导服务器。一次保存一个文件。我使用for循环迭代文件数组，并请求保存每个文件。在这里，我希望只有在得到第一个文件的响应后才能进行下一次调用。我已经尝试了下面给出的代码，但我无法实现它

组件技术

---

您可以使用

async

wait

async uploadNewsFiles() {

for (let index = 0; index < this.files.length; index++) {
  var body = new FormData();
  body.append('file', this.files[index]);
  this.uploading.push(true);
  await this.uload(body,this.newsId,this.getFileDescriptionFormGroup(index)
  .controls['des'].value,index).then((status:any)=>
  {
     if (status.status === 'success') {
       body.delete('file');
       this.uploading[index] = false;
       this.uploadingStatus.push(true);
// here we are calling the 
     } else {
       body.delete('file');
       this.uploading[index] = false;
       this.uploadingStatus.push(false);
     }
    },(err)=>alert('failed'))
  }
}

uload(body,newsId,desc,index) {
  return new Promise((resolve, reject) => {
     this.service.saveFiles(body, newsId,desc).toPromise().then(resp => {
        resolve(resp); // here we are resolving our promise
     });
  });
}

---

我希望它能帮助您。

因为您使用的是Angular，所以我们可以利用

rxjs

库，而不是使用

对http调用中的观察对象进行渲染和链接，例如：

function modUploadFiles() {
  this.files
    .map((file, index) => {
      const body = new FormData();
      body.append("file", file);

      const newsId = this.newsId;

      const desc = this.getFileDescriptionFormGroup(index).controls["des"]
        .value;

      return this.service.saveFiles(body, newsId, desc).finally(status => {
        body.delete("file");
        this.uploading[index] = false;
        this.uploadingStatus.push(status.status === "success");
      })
    })
    .reduce((acc, next) => acc.flatMap(() => next))
    .subscribe(result => {/*Do something*/});
}

您可以在以下问题中看到更多信息：

如果您使用的是wait，则不应使用。then（），它将返回响应。但在这种情况下，我们有api调用，因此在使用api后，我们解决了该承诺，这不是正确的方法吗？我们是否应该在不写“then（）”的情况下写resolve？
async uploadNewsFiles() {

for (let index = 0; index < this.files.length; index++) {
  var body = new FormData();
  body.append('file', this.files[index]);
  this.uploading.push(true);
  await this.uload(body,this.newsId,this.getFileDescriptionFormGroup(index)
  .controls['des'].value,index).then((status:any)=>
  {
     if (status.status === 'success') {
       body.delete('file');
       this.uploading[index] = false;
       this.uploadingStatus.push(true);
// here we are calling the 
     } else {
       body.delete('file');
       this.uploading[index] = false;
       this.uploadingStatus.push(false);
     }
    },(err)=>alert('failed'))
  }
}

uload(body,newsId,desc,index) {
  return new Promise((resolve, reject) => {
     this.service.saveFiles(body, newsId,desc).toPromise().then(resp => {
        resolve(resp); // here we are resolving our promise
     });
  });
}


public saveFiles(body,newsId,des) {
 return this.http.post(this.url + '/saveFiles? 
         newsId='+newsId+'&fileDescription='+des,body);
}

function modUploadFiles() {
  this.files
    .map((file, index) => {
      const body = new FormData();
      body.append("file", file);

      const newsId = this.newsId;

      const desc = this.getFileDescriptionFormGroup(index).controls["des"]
        .value;

      return this.service.saveFiles(body, newsId, desc).finally(status => {
        body.delete("file");
        this.uploading[index] = false;
        this.uploadingStatus.push(status.status === "success");
      })
    })
    .reduce((acc, next) => acc.flatMap(() => next))
    .subscribe(result => {/*Do something*/});
}