Angular 2使用observable的功能缓存http请求

Ult*_*cho 5 rxjs angular2-services angular

我发现了许多缓存反应式可观察量的方法,更具体地说,是http请求的结果.但是,由于以下原因,我对提议的解决方案并不完全满意:

1.此答案/sf/answers/2549206831/使用私有字段存储第一个请求的结果,并在所有后续调用中重用它.

代码:

private data: Data;    
getData() {
    if(this.data) {
        return Observable.of(this.data);
    } else {
        ...
    }
}
Run Code Online (Sandbox Code Playgroud)

可悲的是,可观察力的力量完全被忽略了 - 你手动完成所有的东西.事实上,如果我对将结果分配给局部变量/字段感到满意,我就不会寻找合适的解决方案.我认为一个不好的做法的另一个重要的事情是服务不应该有一个状态 - 即应该没有包含从一个调用到另一个调用的数据的私有字段.清除缓存相当容易- 只需将this.data设置为null,即可重新执行请求.

2.这个答案/sf/answers/2548910241/建议使用ReplaySubject:

    private dataObs$ = new ReplaySubject(1);

    constructor(private http: Http) { }

    getData(forceRefresh?: boolean) {
        // If the Subject was NOT subscribed before OR if forceRefresh is requested 
        if (!this.dataObs$.observers.length || forceRefresh) {
            this.http.get('http://jsonplaceholder.typicode.com/posts/2').subscribe(
                data => this.dataObs$.next(data),
                error => {
                    this.dataObs$.error(error);
                    // Recreate the Observable as after Error we cannot emit data anymore
                    this.dataObs$ = new ReplaySubject(1);
                }
            );
        }

        return this.dataObs$;
    }
Run Code Online (Sandbox Code Playgroud)

看起来非常棒(再次 - 清除缓存没有问题)但我无法映射此调用的结果,即

service.getData().map(data => anotherService.processData(data))
Run Code Online (Sandbox Code Playgroud)

这是因为底层观察者没有调用其完整方法.我很确定很多反应方法也不适用于此.要实际获取数据,我必须订阅此observable,但我不想这样做:我想通过解析器获取我的一个组件的缓存数据,该解析器应该返回一个Observable(或Promise),而不是订阅:

路线

{
    path: 'some-path',
    component: SomeComponent,
    resolve: {
      defaultData: DefaultDataResolver
    }
}
Run Code Online (Sandbox Code Playgroud)

解析器

...
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Data> {
    return this.service.getData();
}
Run Code Online (Sandbox Code Playgroud)

永远不会激活组件,因为它的依赖性永远不会被解析.

3.在这里/sf/answers/2540721081/我找到了一个使用publishLast().refCount()的提议.

代码:

getCustomer() {
    return this.http.get('/someUrl')
        .map(res => res.json()).publishLast().refCount();
}
Run Code Online (Sandbox Code Playgroud)

这满足了我对缓存解析的要求 但是我还没有找到一个干净整洁的解决方案来清除缓存.

我错过了什么吗?任何人都可以想出一种更好的方法来缓存反应性可观察量能够映射其结果,以及一旦它不再相关就刷新缓存数据吗?

gle*_*snz 0

使用选项 3. 为了允许清除缓存,您可以将可观察量分配给私有成员并返回该成员,例如。

getCustomer() {
    if (!this._customers) {
        this._customers = this.http.get('/someUrl')
        .map(res => res.json()).publishLast().refCount();
     }
     return this._customers
}

clearCustomerCache() {
    this._customers = null;
}
Run Code Online (Sandbox Code Playgroud)