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

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調用的結果？

Answer 2

我還沒有完全理解這個問題，但正如我所理解的那樣，forkJoin並不適合你，因為你試圖傳遞一系列可觀察量。 要解決該問題，請嘗試應用可觀察數組：

 forkJoin.apply(this, requests).subscribe(

希望這可以幫助