RXJS/Angular 防止多个订阅者上的多个 HTTP

Question

我有“mainData”服务，它由三部分组成：

• currentPage 被分页器组件用来切换页面。可以随时更新。
• folders 包含当前文件夹中的所有文件夹。有 2 个组件使用此 observable（文件夹内容列表的类型）
• files 包含当前文件夹中的所有文件。有 3 个组件使用此 observable（文件夹内容列表的类型）

默认视图是没有文件夹的视图，因此我不想进行不必要的 HTTP 调用。

public currentPage = new ReplaySubject(1);
public folders: Observable<FLFolder[]>;
public files: Observable<FLFile[]>;

constructor(
  activatedRoute: ActivatedRoute,
  folderService: FolderService,
  fileService: FileService,
) {
  // Populate `this.currentPage`
  activatedRoute.queryParams.pipe(
    take(1),
    //  Wait until end of this sync tick. If no emission is made, it will use default in the next tick.
    takeUntil(timer(1, queueScheduler)),
    defaultIfEmpty<Params>({}),
  ).subscribe(query => {
    if (query.page) {
      this.currentPage = +query.page;
    } else {
      this.currentPage = 1;
    }
  });

  /** This observable is internal, only to be used by `folders` and `files` */
  const folderIDAndPage: Observable<[string, number]> = combineLatest(
    activatedRoute.url.pipe(
      switchMap(segments => folderService.getFoldersFromSegments(segments)),
      distinctUntilChanged(),
    ),
    this.currentPage.pipe(
      distinctUntilChanged(),
    ),
  ).pipe(
    // Prevent repeating HTTP somehow...
    publishReplay(1),
    refCount(),
  );

  this.folders = folderIDAndPage.pipe(
    switchMap(([folderID, page]) => folderService.getFfolders(folderID, page)),
    // Prevent repeating HTTP somehow...
    publishReplay(1),
    refCount(),
  );

  this.files = folderIDAndPage.pipe(
    switchMap(([folderID, page]) => fileService.getFiles(folderID, page)),
    // Prevent repeating HTTP somehow...
    publishReplay(1),
    refCount(),
  );
}

当没有订阅 folders 或 files 时，不会生成 HTTP。但即使一个人只订阅其中一个，folders 和 files 也会被填充（在进行 HTTP 调用时）并同时更新。

Answer 1

this.folders 和 this.files 在此服务中没有被调用。组件是怎么回事？

也许重构是为了？如果我离开了，请原谅我。

我使用 getter 设置我的服务：

private _currentUser = new BehaviorSubject<User>({} as User);

那么你只能通过访问getter从组件中获取：

public getCurrentUser(): Observable<User> {
    return this._currentUser.asObservable();
}

这样称呼更清楚。

Answer 2

您能否在您的代码中进行以下更改并尝试 -

const getFoldersFromSegments$ = activatedRoute.url.pipe(
  switchMap(segments => folderService.getFoldersFromSegments(segments)),
  distinctUntilChanged(),
  publishReplay(1),
  refCount(),
);

/** This observable is internal, only to be used by `folders` and `files` */
const folderIDAndPage: Observable<[string, number]> = combineLatest(
  getFoldersFromSegments$,
  this.currentPage.pipe(
    distinctUntilChanged(),
  ),
).pipe(
  // Prevent repeating HTTP somehow...
  publishReplay(1),
  refCount(),
);

顺便说一句 - 你在 activatedRoute.queryParams observable 上使用了 take(1)；这将使您的this.currentPage 只更改一次。但是你说，

随时更新

，这不是矛盾吗？还是故意的？