如何取消来自许多角度 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 请求？对于批量取消，我可以取消订阅我的 observable，但在这种情况下，我需要让其他人仍在上传。

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 - 附加到请求的每个文件的 observable 上；确保当点击某个文件对应的按钮时，会取消当前请求

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