一个可观察的多用户Rxjs/Angular共享不起作用

Question

我在我的一个项目中使用angular 4，我正在进行一个http调用来获取数据。当数据从后端返回时，我会缓存数据，这样对于后续的请求，我就不必一次又一次地进行其余的调用。

getApplication(): Observable<Array<Application>> {
        return new Observable<Array<Application>>((observer) => {
            if (this.app&& this.app.length > 0) {
                observer.next(this.app)
            } else {
                this._http
                    .get<Application[]>(this.url)
                    .map((app) => this.mapToApp(app))
                    .subscribe((result: Array<Application>) => {
                        observer.next(result);
                    }, () => {
                        observer.next([]);
                    })
            }
        })
    }

这工作得很好。但是如果两个调用同时进行，我会看到网络选项卡中有两个请求而不是一个。所以我尝试共享（）来满足“一个可观察的，多个订阅者”。

getApplication(): Observable<Array<Application>> {
            return new Observable<Array<Application>>((observer) => {
                if (this.app&& this.app.length > 0) {
                    observer.next(this.app)
                } else {
                    this._http
                        .get<Application[]>(this.url)
                        .map((app) => this.mapToApp(app))
                        .subscribe((result: Array<Application>) => {
                            observer.next(result);
                        }, () => {
                            observer.next([]);
                        })
                }
            }).share()
        }

但同样，我看到网络选项卡中有多个请求，而不是一个。要只打一个电话并与所有用户分享结果，必须做些什么？请帮帮忙。

Answer 1

是否调用getApplication（）方法两次？如果是，则创建两个不同的可观察值。

也许你应该遵循出版商/订户模式，使用主题来代替？

Answer 2

我的第一个建议是考虑按照这些思路在代码中进行一些简化

getApplication(): Observable<Array<Application>> {
      if (this.app && this.app.length > 0) {
         return Observable.of(this.app);
      }
      return this._http
                    .get<Application[]>(this.url)
                    .map((app) => this.mapToApp(app))
                    .do((result: Array<Application>) => {
                        this.app = result;
                    }
}

有了这个逻辑，您可以使用任何想要的逻辑进行缓存。您已经决定检查< code>this.app是否不为空，以及它是否包含一些元素。但是您可以使用任何其他逻辑，可能取决于输入参数。

一个不同的故事是同时发出两个呼叫的问题。在这种情况下，您可能希望＜code＞共享＜/code＞Observable以便只共享一个订阅，＜code＞重播＜/code＞最后记录的结果以便返回缓存值。

这样做的一种方法可以是

private cache$: Observable<Array<Application>>;

requestApplication(): Observable<Array<Application>> {
          return this._http
                        .get<Application[]>(this.url)
                        .map((app) => this.mapToApp(app))
                        .do((result: Array<Application>) => {
                            this.app = result;
                        }
}

getApplication() {
    if(!cache$) {
       cache$ = this.requestApplication().shareReplay(1);
    }
    return cache$;
}

这里的技巧是由共享重播运算符执行的。它的共享部分确保订阅被共享。缓冲区大小为1的重播部分确保始终返回存储的最后一个结果。

然后，您可能会面临偶尔清除缓存的问题。但这里的故事变得更加复杂，我建议你看这篇非常好的文章https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html