Angular的rxjs中的forkJoin作用和使用方法

Posted 2023-04-28

参考技术A 有很多场景需要在多个接口返回之后再进行渲染界面，此时可以使用forkJoin在多个结果都返回时再进行下一步的操作。
具体使用方法如下：

不过使用forkJoin也存在一定的风险，需要保证多个接口都能够成功返回结果。如果有个别的接口没有成功返回，使用forkJoin不好监听具体错误。

使用 switchmap 和 forkjoin 链接 observables 不能按预期工作 angular typescript rxjs

【中文标题】使用 switchmap 和 forkjoin 链接 observables 不能按预期工作 angular typescript rxjs

【英文标题】：chaining observables with switchmap and forkjoin not working as expected angular typescript rxjs

【发布时间】：2020-08-28 23:51:16

【问题描述】：

我目前正在尝试创建一个系统，如果我成功更新了一个请求，我会在 forkjoin 中触发 3 个 observable，然后一旦完成 console.log('complete/or finish') 否则如果它不是什么都不做。目前，虽然可观察对象在 forkjoin 完成之前就完成了，但我完全不知道发生了什么，

  copyAttachments(): Observable<any> 
    if (this.model.attachments.length > 0) 
      return this.attachmentService.copyAttachments(this.model.attachments, this.model.id);
    
    return empty();
  

  uploadAttachments(): Observable<any> 
    this.showAttachmentsUploadingModal = true;
    const formData = new FormData();

    if (this.formAttachments.length > 0) 
      this.showAttachmentsUploadingModal = true;
      this.formAttachments.forEach(file => 
        formData.append('files', file, file.name);
      );
    

    // uploading empty formData will still trigger creation of default folder structure
    return this.attachmentService.uploadAttachments(formData, this.model.id);
  

  uploadCustomerData(): Observable<any> 
    this.showAttachmentsUploadingModal = true;
    const formData = new FormData();

    if (this.formCustomerData.length > 0) 
      this.showAttachmentsUploadingModal = true;
      this.formCustomerData.forEach(file => 
        formData.append('files', file, file.name);
      );
      return this.attachmentService.uploadCustomerData(formData, this.model.id);
    

    return empty();
  

handleAttachments(): Observable<any> 
    return forkJoin
      (
        this.copyAttachments(),
        this.uploadCustomerData(),
        this.uploadAttachments()
      )
  

  updateRequest() 
    this.myservice
      .updateRequest(this.model)
      .pipe(
        switchMap((saveResult: boolean) => 
          this.showSubmittingModal = false;
          if (saveResult === true) 
            return this.handleAttachments();
           else 
            return empty();
          
        ),
      )
      .pipe(finalize(() => 
        console.log('finish')
      ))
      .subscribe(
        response => 
          // todo: do anything with this response from uploadAttachments()?
          this.showAttachmentsUploadingModal = false;
        ,
        error => 
          location.reload();
        ,
        () => 
          console.log('complete')
        
      );
  

预期结果是我的服务完成，然后我的 forkjoin observables 完成，然后它将 console.log('finish')

目前的结果是服务完成。它 console.logs('finish') 然后我的 forkjoin 触发

【问题讨论】：

你的 forkJoin 真的触发了吗？请记住，如果 forJoin 的任何内部可观察对象返回 empty()（我看到附件副本确实如此），forkJoin 将不会触发

【参考方案1】：

我发现这个问题的解决方案不是返回 empty() 或 of() 你需要返回一个空对象作为 observable 这样 Forkjoin 仍然保持值所以 return of() 并且一切都很好