angular - 如何手动完成 Angular http observable

Question

我正在开发多个并行文件上传功能，能够删除/取消正在进行的 http 调用。一旦所有调用完成/取消，我就会通知消费者。

为此，我使用 forkJoin 组合各个 http observables。但如果用户点击取消按钮，我不应该等待实际的 http 响应完成。

takeUntill 不会优雅地处理它，因为它只有在从底层源 http 流接收到下一个值后才会起作用。

this.uploadFiles().subscribe(data => {
  console.warn("Upload completed now!!!!!", data);
});

uploadFiles() {
  return forkJoin(
    this.files.map(file => // returns array of observable
        this.uploadFile(file).pipe( catchError(() => of("Error re-emitted as success to prevent early exit"))))
  ).pipe(map(() => {
       // logic for some user friendly statistic
      return data;
    }));
}

Answer 1

使用 takeUntil 和一个主题作为通知器来完成 Observables。您可以将文件 id 传递给主题，并使用 takeUntil 中的 filter 来仅取消具有给定 id 的文件的文件上传。

使用defaultIfEmpty提供一个指示已取消请求的值。这还可以防止外部 forkJoin 在内部空请求完成时立即完成。

private cancelUpload$ = new Subject<number>();

uploadFiles() {
  let errorCount = 0, cancelledCount = 0, successCount = 0;
  return forkJoin(this.dummyFiles.map(file =>
    this.uploadFile(file).pipe(
      // react to CANCEL event
      map(response => response == 'CANCEL' ? ++cancelledCount : ++successCount),
      catchError(() => of(++errorCount))
    )
  )).pipe(map(() => ({ errorCount, successCount, cancelledCount })));
}

uploadFile(file: any) {
  http$.pipe(
    ...
    takeUntil(this.cancelUpload$.pipe(filter(id => id == file.id))), // cancel
    defaultIfEmpty('CANCEL'), // provide value when cancelled
  )
}

cancelUpload(file: any) {
  file.uploadStatus = "cancelled";
  this.cancelUpload$.next(file.id) // cancel action
}

https://stackblitz.com/edit/angular-zteeql-e1zacp