如何防止对同一端点的多次调用

Question

我在两个单独的组件中调用了方法loadParticipant 两次，它几乎在同一时间进行，尽管将 Observable 保存在变量中，api 被多次调用。该解决方案适用于 AngularJs 和 Promises 调用，但现在我当然想使用 Observables :)

我尝试在map后添加debouncetime和share参数

return (this.loadParticipantObservable = this.sharedEndpoints.getParticipant().map((response) => {
    this.loadParticipantObservable = null;
    return (this.participant = response);
})).share().debounceTime(1000);

loadParticipant方法的实际代码

public loadParticipant(): Observable<DTO<PersonModel>> {
    if (this.participant) {
        return new BehaviorSubject<DTO<PersonModel>>(this.participant);
    }

    if (this.loadParticipantObservable) {
        return this.loadParticipantObservable;
    }

    return (this.loadParticipantObservable = 
        this.sharedEndpoints.getParticipant().map((response) => {
            this.loadParticipantObservable = null;
            return (this.participant = response);
        }));
    }

示例我如何调用 loadParticipant 方法

this.sharedService.loadParticipant().subscribe((response: DTO<PersonModel>) => {
            ...
     });

与此同时，Observable 不为空，代码进入此条件并执行

 return this.loadParticipantObservable;

我在调试器中检查了它。

这只是返回我可观察的，但不幸的是，这段代码调用了更低的代码，返回了从后端调用真实端点的代码

Answer 1

如果我站在你的立场上，我会尝试将 fetching 和 visualizing 逻辑一分为二，换句话说，服务有两种方法：

• methodI 用于从后端检索和保存客户端上的数据（在服务内部的变量中）

• methodII 获取组件中的数据（从提到的变量），需要它

之后，我将在需要可视化所需数据的任何地方订阅methodII，将调用最近的公共父组件中的服务器。

看看这个 rxjs 演示 CodeSandbox，我想它会帮助你理解我在说的东西 :)

** 注意：如果您负担得起，请移至 rxjs 5.5+，因为您将能够使用可管道操作符，这会带来一些好处，您可以在主题上查看此内容：Pipeable operators article

** 注意2：如果您正在从事中型或大型项目，请查看ngrx，因为使用ngrx，所有与服务器调用和UI状态管理相关的头痛都会消失。