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

Posted

技术标签:

【中文标题】使用 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() 并且一切都很好

【讨论】:

以上是关于使用 switchmap 和 forkjoin 链接 observables 不能按预期工作 angular typescript rxjs的主要内容,如果未能解决你的问题,请参考以下文章

如何展平 rxjs 中的嵌套数组

使用SwitchMap()处理取消先前的请求

在 Angular 5 中使用 SwitchMap 订阅

如何以及在何处使用 Transformations.switchMap?

switchMap 中 of(...) 和 [...] 的区别

map() 和 switchMap() 方法有啥区别?