缓存数据，但在后台检查新数据

Question

我想缓存我的数据，但同时我需要我的数据是最新的。我发现这个：Angular2 easiest way to cache HTTP responses但这不会检查新的数据。

我在我的服务现在有这样的：

public publishedSessions: Session[] = null; 

    getPublishedSessions(): Observable<any> { 
    let headers = new Headers(); 
    headers.append('authorization', this.userService.getToken()); 

    if (this.publishedSessions) { 
     this.http.get(this.apiUrl + 'api/sessions/published', { 
     headers: headers 
     }) 
     .map(res => res.json().sessions) 
     .subscribe(sessions => this.publishedSessions = sessions); 

     return Observable.of(this.publishedSessions); 
    } else { 
    return this.http.get(this.apiUrl + 'api/sessions/published', { 
     headers: headers 
    }) 
     .do(res => this.publishedSessions = res.json().sessions) 
     .map(res => res.json().sessions) 
     .catch((error) => Observable.of(error)); 
    } 
    } 

而且在我的组件一些标准代码：

handlePublishedSessions(): void { 
    this.subscriptionArr.push(this.sessionService.getPublishedSessions().subscribe(sessions => { 
     this.session = sessions 
    })); 
} 

这将导致页面的效果，当我第一次浏览（查看1） ，会打电话（打电话1）（通缉）。然后，如果我离开并返回到页面（访问2），来自呼叫1的数据将被返回（不需要），同时，呼叫2正在工作。因此，如果我然后再次导航并导航回（访问3），则来自呼叫2的数据将被返回。

我希望呼叫1的数据在前几毫秒显示在访问2上（直到呼叫2完成）。当呼叫2完成时，我希望数据被替换（无需用户交互）。

Answer 1

我会用一个BehaviorSubject缓存数据。

看看这个plunker获得一个想法：https://plnkr.co/edit/jNNQJToYia2MhIE488YX?p=preview

import {Component, NgModule, Injectable} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {HttpModule, Http} from '@angular/http'; 

import {BehaviorSubject} from 'rxjs/Rx'; 

@Injectable() 
export class AnyService { 

    public data = new BehaviorSubject<string>(); 

    constructor(private _http: Http) { } 

    public getData(): string { 
    this._http.get('https://httpbin.org/bytes/12') 
     .subscribe(
     resp => this.data.next(resp._body) 
    ); 
    return this.data.value; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2 (click)="getData()">Hello {{name}} -- CLICK ME !! --</h2> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 

    firstSubscribeCallback = false; 

    constructor(private _srvc: AnyService) { 
    this.name = 'Angular2' 

    this._srvc.data.subscribe(
     newData => { 

     // FIRST CALL WILL BE THE CACHED DATA.. 
     if (!this.firstSubscribeCallback) { // JUST FOR DEMO .. 

      console.log('got cached data @ startup..'); 
      this.firstSubscribeCallback = true; 

     } 
     else console.log('got new data:'); 

     console.log(newData); 
     } 
    ); 

    this.getData(); // get FRESH data .. 
    } 

    getData() { 
    console.log('getting cached data:'); 
    console.log(this._srvc.getData()); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, HttpModule ], 
    declarations: [ App ], 
    providers: [ AnyService ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}