javascript - Angular 5 : Multiple requests at once with forkJoin

Question

---

导入节点

是后端的问题，不是 Angular 问题，请求是正确的。

---

我喜欢在我的 angular5 应用程序中一次上传不同的文件。为此，我使用 rsjx forkJoin。我将请求附加到一个数组中，如您在以下代码中所见。

将请求添加到数组后，都是相同的请求，意思是我多次上传一个文件，而不是选择不同的文件。在我将它们添加到数组之前，您可以在屏幕截图中看到，没关系，服务创建了不同的请求。我知道这是某种指针问题，但我不知道如何解决这个问题，我尝试使用 Object.assign({}, request) 进行深度复制，但没有用对于 Observable。

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

组件代码:

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 => {
        // [...]
      }
    )
  }
}

服务看起来像这样:

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())
    )
  );
}

Answer 1

你的代码看起来是正确的，尽管你可以做一些改进(因式分解、语法......)，例如:

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()))
    );
}

此外，请将您的日志以文本形式发布，因为不是每个人都可以访问 imgur。您是否尝试记录 forkJoin 调用的结果？