javascript - Angular 5：使用 forkJoin 一次多个请求

Question

---

重要节点

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

---

我喜欢在我的 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())
    )
  );
}

标签： javascriptangulartypescriptangular5

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通话结果？