Javascript 角度5：使用forkJoin同时执行多个请求

导入节点

是后端内部的问题，不是角度问题，请求是正确的。

---

我喜欢在angular5应用程序中同时上传不同的文件。为此，我使用

rsjxforkjoin

。我将请求附加到一个数组中，如下面的代码所示

将请求添加到数组后，它们都是相同的请求，这意味着我多次上载一个文件，而不是不同的选定文件。在我将它们添加到阵列之前，您可以在屏幕截图中看到，很好，服务创建了不同的请求。我知道这是某种指针问题，但我不知道如何解决，我尝试使用

Object.assign（{}，request）

创建一个深度副本，但对

可观察的
无效

控制台日志~~（忽略错误，服务器总是拒绝第二个请求，因为某些唯一的约束要求-它是正确的）：~~


组件代码：

uploadFiles() {
  var requests = [];
  var ctrNoFailuer = this.filesReplace.length;

  for (var i = 0; i < this.filesReplace.length; i++) {
    let request = this.solutionFileService.update(this.filesReplace[i][0], this.filesReplace[i][1]);
    console.log(request);
    requests.push(request);
  }

  if (requests.length == 0) {
    this.runTests();
  } else {
    forkJoin(requests).subscribe(
      res => {
        // [...]
      }
    )
  }
}

uploadFiles（）{
var请求=[]；
var ctrNoFailuer=this.filesReplace.length；
for（var i=0；i{
// [...]
}
)
}
}

该服务如下所示：

update(solutionFile: SolutionFile, file?: File): Observable<SolutionFile> {
  console.log(solutionFile);
  let url = `${this.url}/src_uploads/${solutionFile.id}/`;

  if (file) {
    let headers = new HttpHeaders({
      'enctype': 'multipart/form-data',
      'Authorization': `JWT ${this.authService.getToken()}`
    })

    const formData: FormData = new FormData();
    formData.append('student_solution', String(solutionFile.student_solution));
    formData.append('file_src', file, file.name);

    return this.httpClient.put<SolutionFile>(url, formData, { headers: headers })
      .pipe(
        catchError(this.handleError('UPDATE solution-file', new SolutionFile()))
      );
  }

  return this.httpClient.put<SolutionFile>(url, solutionFile, { headers: this.headers })
    .pipe(
      catchError(this.handleError('UPDATE solution-file', new SolutionFile())
    )
  );
}

更新（solutionFile:solutionFile，file？：file）：可观察{
console.log（solutionFile）；
让url=`${this.url}/src_uploads/${solutionFile.id}/`；
如果（文件）{
let headers=新的HttpHeaders({
“enctype”：“多部分/表单数据”，
'Authorization'：'JWT${this.authService.getToken（）}`
})
const formData:formData=new formData（）；
append（'student_solution'，字符串（solutionFile.student_solution））；
append（'file\u src'，file，file.name）；
返回此.httpClient.put（url，formData，{headers:headers}）
.烟斗(
catchError（this.handleError（'UPDATE solution file'，new SolutionFile（）））
);
}
返回this.httpClient.put（url，solutionFile，{headers:this.headers}）
.烟斗(
catchError（此.handleError（'UPDATE solution file'，new SolutionFile（））
)
);
}
您的代码似乎是正确的，但您可以进行一些改进（因子分解、语法…），例如：

uploadFiles() {
  const requests = this.filesReplace.map(fr => this.solutionFileService.update(fr[0], fr[1]));

  if (!requests.length) {
    this.runTests();
  } else {
    forkJoin(requests).subscribe(
      res => {
        // [...]
      }
    )
  }
}

update(solutionFile: SolutionFile, file ?: File): Observable < SolutionFile > {
  let url = `${this.url}/src_uploads/${solutionFile.id}/`;

  const headers = file ?
    new HttpHeaders({
      'enctype': 'multipart/form-data',
      'Authorization': `JWT ${this.authService.getToken()}`
    }) : this.headers;

  const formData: FormData = new FormData();
  formData.append('student_solution', String(solutionFile.student_solution));
  formData.append('file_src', file, file && file.name || undefined);

  const payload = file ? formData : solutionFile;

  return this.httpClient.put<SolutionFile>(url, payload, { headers })
    .pipe(
      catchError(() => this.handleError('UPDATE solution-file', new SolutionFile()))
    );
}

uploadFiles（）{
const requests=this.filesReplace.map（fr=>this.solutionFileService.update（fr[0]，fr[1]）；
如果（！requests.length）{
这是runTests（）；
}否则{
forkJoin（请求）。订阅(
res=>{
// [...]
}
)
}
}
更新（solutionFile:solutionFile，file？：file）：可观察{
让url=`${this.url}/src_uploads/${solutionFile.id}/`；
const headers=文件？
新的HttpHeaders({
“enctype”：“多部分/表单数据”，
'Authorization'：'JWT${this.authService.getToken（）}`
})：this.headers；
const formData:formData=new formData（）；
append（'student_solution'，字符串（solutionFile.student_solution））；
formData.append（'file_src'，file，file&&file.name | |未定义）；
const payload=file？formData:solutionFile；
返回这个.httpClient.put（url，有效负载，{headers}）
.烟斗(
catchError（（）=>this.handleError（'updatesolutionfile'，newsolutionfile（）））
);
}

另外，请以文本形式发布日志，因为并非每个人都可以访问imgur。您是否尝试记录
forkJoin
调用的结果
 我还没有完全理解这个问题，但据我所知，forkJoin对您不起作用，因为您试图传递一组观察值。要克服这个问题，请尝试应用观察值数组：

 forkJoin.apply(this, requests).subscribe(

希望这有帮助