代码之家 › 专栏 › 技术社区 › Alexander Tarasenko

订阅主题时重复请求

rxjs angular

Alexander Tarasenko · 技术社区 · 6 年前

this.service.updateCompanyById(companyInfo, this.company.id, this.logoImage)
        .subscribe(
          (data) => {
            this.bsModalRef.hide();
          },
          (err) => console.log(err)
        );

为我效劳

updateCompanyById(company, companyId, logoImage?: File) {
    ... some code
    return 

    this.http.post(`${this.domainName}api/companies/update/${companyId}`, formData)
          .do(
            (data) => {
              this.companyUpdated.next()
              this.notificationService.notify('Company updated successfully!');
            }
          );
      }

如您所见,我使用了Subject,所以另一个组件知道公司已更新。该组件只包含使用该服务获得的所有公司的列表。在这部分我有

// list of companies    
this.companiesService.companyUpdated
        .subscribe(
          () => {
            this.getCompaniesFromServer();
          }
        )
    getCompaniesFromServer() {
        this.companiesService.getCompaniesInfo()
          .pipe(
            share()
          )
          .subscribe(
            (data) => {
              this.rows = data;
              console.log(data);
            }
          );
      }

我第一次编辑用户,得到一个响应,其中列出了公司列表组件中的所有用户。在第二次编辑之后,我得到了两个答案,以此类推。我想问题出在主题上,但我不明白到底哪里出了问题。

有谁能解释为什么会发生这种情况,以及这种行为的原因是什么? 另一个可能的解决方法(虽然我不确定)是添加.pipe(take(1))

2 回复 | 直到 6 年前

misha130 6 年前

要么在subscribe之前添加first(),表示它只获取一次该值,要么在接收到订阅后处理它。

这里的问题不是订阅获得两倍的数据,而是有两个订阅。方案A:

this.companiesService.companyUpdated
        first().subscribe(
          () => {
            this.getCompaniesFromServer();
          }
        )

let companyUpdateSubscription: Subscription =  this.companiesService.companyUpdated
            first().subscribe(
              () => {
                this.getCompaniesFromServer();
                companyUpdateSubscription.unsubscribe();
              }
            )

请注意:如果您选择选项a,出于内存管理的考虑,我仍然会取消订阅onDestroy。

Alexander Tarasenko 6 年前

所以,我再次审视了这个问题,意识到了问题所在,以及可能的解决方案。不过,我还是不确定我是否做对了。

首先,我有两个订阅一个主题我有一个功能

onEditCompany(){
    this.companiesService.companyUpdated
        .subscribe(
          (data) => {
            console.log(data);
            this.getCompaniesFromServer();
          }
        );
}

onCreateCompany() {
      this.companiesService.companyUpdated
            .subscribe(
              (data) => {
                console.log(data);
                this.getCompaniesFromServer();
              }
            );
    }

据我所知,这在一个地方创建了两个订阅,这就是为什么我有多个请求而不是一个。因此,据我所知,我只需要一个companyUpdated实例,并且只要它将从updatecompany in service或addcompany in the service收到,我就假设我只需要移动我的 this.companiesService.companyUpdate已更新 对于ngOnInit,它将同时听取添加新公司和更新公司案例的更改。所以,现在看起来是这样的: 从两者中删除旧代码 onEditCompany() 和用ngOnInit写下:

this.companyUpdatedSubscription = this.companiesService.companyUpdated
        .switchMap(
          () => this.companiesService.getCompaniesInfo()
        )
        .subscribe(
          (data) => this.rows = data
        );