Блог

Итак, я работаю над проектом Angular, в котором многие HTTP-ответы используются на нескольких страницах, поэтому я хотел кэшировать результаты во внешнем интерфейсе, чтобы их можно было использовать для разных компонентов.

Вот «простой» пример моей текущей реализации:

Service.ts

 serviceData = new BehaviorSubject(false);
  

Component.ts

     this.service.serviceData.pipe(takeUntil(this.unsubscribe$)).subscribe( response => {
      if (!responseData) {
        this.service.makeAPICall().subscribe(res => {
          this.service.serviceData.next(res);
        });
      } else {
        this.bankBranchDetails = bankData;
      }
    });
  

Используя этот фрагмент, я могу поделиться одними и теми же результатами API на нескольких страницах, и я могу очистить кеш, выполнив

 this.service.serviceData.next(false)
  

В этом простом примере все выглядело нормально (все еще интересно узнать, есть ли лучший способ сделать это).

Момент, когда это становится очень сложным, — это когда мне нужно использовать результат одной подписки в качестве параметра для 2 кэшированных HTTP-вызовов. Например, если у меня есть beneficiaryList и beneficiaryCategoryList, которые оба зависят от выбранного в данный момент профиля, это то, что я получаю.

     this._paymentSaService.selectedProfile.pipe(switchMap(selectedProfile => {
      this.selectedProfile = selectedProfile;

      //Clear the beneficiaryCategoryList and beneficiaryListData because the profile just changed, meaning we need to fetch the new results
      this._paymentSaService.beneficiaryCategoryList = new BehaviorSubject<BeneficiaryCategoryInterface[] | false>(false);
      this._paymentSaService.beneficiaryListData = new BehaviorSubject<Beneficiary[] | false>(false);

      return zip(this._paymentSaService.beneficiaryCategoryList, this._manageBeneficiary.beneficiaryList);
    }), takeUntil(this.unsubscribe$)).subscribe(([categories, beneficiaries]) => {
      if (!categories || !beneficiaries) {
        this._paymentSaService.getBeneficiaryCategories(this.selectedProfile.ProfileId).subscribe(res => {
          this._paymentSaService.beneficiaryCategoryList.next(res);
        });

        this._manageBeneficiary.getBeneficiariesList(this.selectedProfile.ProfileId).subscribe(res => {
          this._manageBeneficiary.beneficiaryList.next(res);
        });
      } else {
       //Both API calls completed, now we can handle the 2 pieces of data.
      }
    });
  

Есть ли более простой способ сделать это?
Это «решение» кажется очень излишним и запутанным.

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

РЕДАКТИРОВАТЬ: я создал stackblitz с копией моей реализации.

https://stackblitz.com/edit/angular-axpmm3?file=src/app/app.component.html

О, еще один недостаток этой реализации, который я хотел бы исправить, заключается в том, что вам нужно очистить кеш обеих наблюдаемых, если вы хотите обновить хотя бы 1 из них, из-за того, что я использую zip. Но если я не буду использовать zip, реализация полностью прервется, потому что, как только завершится 1 вызов API, он снова запустит оба вызова.

Изучая ваш код, я пошел дальше и немного упростил ситуацию. По сути, поскольку ваша цель — просто обновлять (и генерировать) кеши для beneficiaryList and beneficiaryCategoryList каждый раз, когда выбирается новый профиль, я попытался упростить все, переместив всю логику в subscribe блок и удалив операторы switchMap and zip .

Кроме того, я добавил a, forkJoin чтобы вы могли лучше контролировать, когда выполняются ваши запросы, поскольку в исходном сообщении ответы на ваши http-запросы запускались независимо, поэтому вы никогда не сможете получить ответ от обоих одновременно, на случай, если вам нужно, чтобы они что-то сделалиостальное со всеми данными сразу.

 this.service.selectedProfile.pipe(
  takeUntil(this.unsubscribe$)
).subscribe((selectedProfile: any) => {
  this.selectedProfile = selectedProfile;

  /* Update beneficiaries and categories lists now 
  that the selectedProfile has changed.*/  
  this.updateBeneficiariesListAndCategories(selectedProfile).subscribe((res) => {
    // Do whatever you need with returned data
  });
});


/**
 * Place parallel requests to update beneficiaries and categoies
 * for a specific profile and update caches
 */
updateBeneficiariesListAndCategories(profile: any): Observable < any > {

  // Clear beneficiaries and categories 
  this.service.beneficiaryCategoryList.next([]);
  this.service.beneficiaryListData.next([]);

  // Create requests
  const getBeneficiaryCategoriesRequest = this.service
    .getBeneficiaryCategories(selectedProfile.ProfileId)
    .pipe(
      catchError(() => of ([]))
    );
  const getBeneficiariesListRequest = this.service
    .getBeneficiariesList(selectedProfile.ProfileId).pipe(
      catchError(() => of ([]))
    );

  /* Use a forkJoin to place both requests in parallel and
  then do something when both calls have completed (the
  catchError() operator on each request should keep the
  forkJoin from failing completely should either of the
  calls fail).*/
  return forkJoin({
    categories: getBeneficiaryCategoriesRequest,
    beneficiaries: getBeneficiariesListRequest
  }).pipe(
    tap((res: any) => {
      // Update caches 
      this.service.beneficiaryCategoryList.next(res.categories);
      this.service.beneficiaryListData.next(res.beneficiaries);
      console.log(res.categories);
      console.log(res.beneficiaries);
    })
  );
}  

Я разветвил ваш образец stackblitz и внес свои правки здесь: https://stackblitz.com/edit/angular-hnj3ys