как отменить один из ожидающих http запросов от многих angular 8

Question

У меня есть реализация для загрузки файла API, используя перетаскивание нескольких файлов. Я звоню в течение l oop, как показано ниже

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 (2-й аргумент; mergeMap((val, idx) => ...)), вы можете идентифицировать определенный файл.