rxjs - 如何取消来自许多角度 8 的待处理 http 请求之一

Question

我有一个使用拖放多个文件的文件上传 api 实现。我正在 for 循环中进行调用，如下所示

uploadFile(file:any[]) {
    file.forEach((file, index)=>{
      const formData = new FormData();
      formData.append('report_file', file);
      this.fileService.uploadFile(this.configurations.uploadUrl, formData)
      .subscribe(fileResp=>{
        console.log('file', fileResp);
      }, error=>{
        console.log('error while uploading files', error);
      });
  });
}

这在上传时有效。但是，如果需要，我需要能够取消其中一个待处理文件。那么，如果用户选择取消该上传，我该如何取消特定的 http 请求？对于批量取消，我可以取消订阅我的可观察对象，但在这种情况下，我需要让其他人仍在上传。

Answer 1

这是一个想法:

const files$ = from(files);

files$.pipe(
  mergeMap(
    file => this.fileService.uploadFile(/* ... */).pipe(
      takeUntil(fromEvent(getButtonThatCorrespondsToFile(crtFile), 'click').pipe(take(1)))
    )
  )
)

function getButtonThatCorrespondsToFile (): HTMLButtonElement { }

• mergeMap - 将允许您同时开始对每个文件发出请求
• takeUntil - 附加到每个文件的请求可观察对象；确保当点击某个文件对应的按钮时，它会取消当前请求

现在我想一个小问题是如何获得与文件相对应的按钮，但我认为这不会太困难。例如，您可以使用 @ViewChildren 获取所有按钮，并通过使用 mergeMap 的投影函数中的索引(第二个参数；mergeMap( (val, idx) => ...)), 你可以识别某个文件。