Двойные запросы при подписке на тему

Question

У меня есть один компонент (модальный бутстрап), где я редактирую некоторую информацию. Тогда я отправляю его с помощью сервиса. Похоже, это

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);
            }
          );
      }

Проблема в том, что все запросы дублируются.

Например: Я впервые редактирую пользователя и получаю один ответ со списком всех пользователей в моем списке компаний. Затем после второго редактирования я получаю два ответа и так далее. Я предполагаю, что проблема с Темой, но я не могу понять, что именно не так. Пожалуйста, помогите мне, если можете, заранее спасибо

Кто-нибудь может объяснить, почему это происходит и в чем причина такого поведения? Возможное решение, предложенное @ misha130 - добавить .pipe (first ()) Другое возможное мнение (хотя я не уверен в этом) - добавить .pipe (take (1))

Answer 1

Итак, я еще раз посмотрел на эту проблему и понял, в чем заключалась проблема и каково ее возможное решение. Я все еще не уверен, правильно ли я понял это все же.

Прежде всего, у меня было две подписки на одну тему У меня это было в одной функции

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

А потом в другой функции

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

Насколько я понял, было создано две подписки в одном месте, поэтому у меня было несколько запросов вместо одного. Так что, насколько я понял, мне нужен только один экземпляр companyUpdated, и, поскольку он будет получен либо от компании-поставщика обновлений в службе, либо от компании-разработчика в этой службе, я предполагаю, что мне нужно просто переместить мой this .companiesService.companyUpdated в ngOnInit, поэтому он будет прослушивать изменения как для добавления новой компании, так и для обновления случаев компании. Итак, теперь это выглядит так: Удалите старый код из обоих onEditCompany () и onCreateCompany () и напишите следующее в ngOnInit:

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

Answer 2

Либо добавьте first () перед подпиской, чтобы указать, что оно будет принимать значение только один раз, либо утилизируйте подписку после ее получения.

Проблема здесь не в том, что подписка получает вдвое больше данных, а в том, что существует две подписки. Вариант А:

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

Вариант B:

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

На заметку: Если вы выберете вариант А, я все равно откажусь от подписки на Дестрой для управления памятью.