подписка rxjs возвращает дубликаты

Question

После оформления подписки на услугу Angular возвращаются результаты с кучей дубликатов. Для каждого звонка количество дубликатов увеличивается на единицу.

Я пробовал консоль регистрации результатов на разных этапах приложения. Дубликаты возвращаются сразу же после получения обещания

Угловой код обслуживания:

GetUserPendingApprovals(userid: string) {
    let approvalsPending: any[] = [];
    this.http
      .get<{message, approvals: any}>(`/api/approvals/${userid}`)
        .subscribe(approvals => {
          console.log(approvals.approvals);
          approvalsPending = approvals.approvals;
          this.approvalsUpdated.next(approvalsPending);
          approvalsPending = [];
      });
  }
getUserPendingApprovalsUpdateListener() {
  return this.approvalsUpdated.asObservable();
}

конечная точка узла:

app.get("/api/approvals/:userid", (req, res, next) => {
  // const urlData = req.params.userId;
  //console.log(urlData);
  const query = datastore
  .createQuery('approvals')
  .filter('src', '=', req.params.userid);

  query.run().then(approvals => {
  approvals.forEach(approval => console.log(approval));
  console.log(approvals[0].length);
  res.status(200).json(
    {
      message: "Request was processed successfully!",
      approvals: approvals[0]
    }
  );
})
})

Консоль, регистрирующая конечную точку узла, возвращает правильное значение счетчика для запрашиваемых результатов. Однако консольная регистрация тех же результатов в служебном коде Angular возвращает дубликаты, и количество дубликатов увеличивается на единицу для каждого вызова. Пример: 1-й вызов - 2 дубликата, 2-й вызов - 3 дубликата, 3-й вызов - 3 дубликата и так далее.

Подробнее ... Я делаю вложенную подписку из моего углового компонента. Что-то вроде ниже -

ngOnInit() {
    this.activatedRoute.params
      .subscribe(
        (params: Params) => {
         ....some code goes here...
         this.revenueService.GetUserInvoicesThisWeek(this.userid);
         this.currentWeekInvoicesSub = this.revenueService.GetUserInvoicesThisWeekListener()
            .subscribe((revenueInfo: Revenue[]) => {
            ....some code goes here...
            });
         this.currentDayInvoicesSub = this.revenueService.GetUserInvoicesTodayListener()
            .subscribe((todayRevenueInfo: Revenue[]) => {
            ....some code goes here...
            });
         this.approvalsService.GetUserPendingApprovals(this.userid);
         this.approvalsSub = this.approvalsService.getUserApprovalsUpdateListener()
            .subscribe((approvalsPending: any[]) => {
            ....some code goes here...
            });
         });
}

Последняя подписка - это то, где я сталкиваюсь с проблемами. Но я уверен, что выполненное обещание сразу после вызова конечной точки узла возвращает дубликаты. Нечто, о чем я упоминал в начале этого вопроса.

Сомнения: Какова будет причина этих дубликатов? Как решить эту проблему?

Answer 1

Вы подписываетесь каждый раз, когда вызывается эта функция, поэтому вы делаете двойную подписку при каждом изменении маршрута.

GetUserPendingApprovals(userid: string) {
            let approvalsPending: any[] = [];
            this.http
              .get<{message, approvals: any}>(`/api/approvals/${userid}`)
                .subscribe(approvals => {
                  console.log(approvals.approvals);
                  approvalsPending = approvals.approvals;
                  this.approvalsUpdated.next(approvalsPending);
                  approvalsPending = [];
              });
          }

Чтобы устранить эту проблему, воспользуйтесь подпиской на компоненте в службе.

GetUserPendingApprovals(userid: string) {

    return this.http
          .get<{message, approvals: any}>(`/api/approvals/${userid}`)

      }

Компонент ts:

 ngOnInit(){
   this.aprovalSub = this.approvalsService.GetUserPendingApprovals(this.userid);
    .subscribe(approvals => {
                      approvalsService.approvalsPending = approvals.approvals;
                      approvalsService.approvalsUpdated.next(approvalsPending);
                       });
}

ngOnDestroy(){
  if(this.aprovalSub !== undefined) this.aprovalSub.unsubscribe()
}

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