使用angular2 http服務緩存結果

Question

我通過服務公開HTTP GET請求，並且有幾個組件正在使用此數據（用戶的配置文件詳細信息）。我希望第一個組件請求能夠實際向服務器執行HTTP GET請求並緩存結果，以便隨後的請求將使用緩存的數據，而不是再次調用服務器。

這是一個服務的例子，你會如何推薦使用Angular2和typescript來實現這個緩存層。

import {Inject, Injectable} from 'angular2/core'; 
import {Http, Headers} from "angular2/http"; 
import {JsonHeaders} from "./BaseHeaders"; 
import {ProfileDetails} from "../models/profileDetails"; 

@Injectable() 
export class ProfileService{ 
    myProfileDetails: ProfileDetails = null; 

    constructor(private http:Http) { 

    } 

    getUserProfile(userId:number) { 
     return this.http.get('/users/' + userId + '/profile/', { 
       headers: headers 
      }) 
      .map(response => { 
       if(response.status==400) { 
        return "FAILURE"; 
       } else if(response.status == 200) { 
        this.myProfileDetails = new ProfileDetails(response.json()); 
        return this.myProfileDetails; 
       } 
      }); 
    } 
} 

Answer 1

關於你的最後一個註釋，這是我能想到的最簡單的方法：創建將有一個屬性和屬性將保持請求的服務。

class Service { 
    _data; 
    get data() { 
    return this._data; 
    } 
    set data(value) { 
    this._data = value; 
    } 
} 

就這麼簡單。 plnkr中的其他一切都將保持不變。我從服務中刪除了請求，因爲它會自動實例化（我們沒有做new Service...，我不知道通過構造函數傳遞參數的簡單方法）。

所以，現在，我們有服務，我們現在做的是使該請求在我們的組件，並將其分配給服務變量data

class App { 
    constructor(http: Http, svc: Service) { 

    // Some dynamic id 
    let someDynamicId = 2; 

    // Use the dynamic id in the request 
    svc.data = http.get('http://someUrl/someId/'+someDynamicId).share(); 

    // Subscribe to the result 
    svc.data.subscribe((result) => { 
     /* Do something with the result */ 
    }); 
    } 
} 

請記住，我們的服務實例是同一個，每組件，所以當我們爲data分配一個值時，它會反映在每個組件中。

這是plnkr與一個工作示例。

參考

• RxJS share operator

Answer 2

的share()運營工作只是在第一次請求，當所有的訂閱服務與您共創一個又一個的話，將無法正常工作，它會做另一個請求。 （這種情況是很常見的，作爲angular2 SPA你總是創建/銷燬組件）

我用ReplaySubject存儲從HTTP觀察到的值。可觀測值可以爲其訂戶提供以前的價值。

的服務：

@Injectable() 
export class DataService { 
    private dataObs$ = new ReplaySubject(1); 

    constructor(private http: HttpClient) { } 

    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$; 
    } 
} 

組件：

@Component({ 
    selector: 'my-app', 
    template: `<div (click)="getData()">getData from AppComponent</div>` 
}) 
export class AppComponent { 
    constructor(private dataService: DataService) {} 

getData() { 
    this.dataService.getData().subscribe(
     requestData => { 
      console.log('ChildComponent', requestData); 
     }, 
     // handle the error, otherwise will break the Observable 
     error => console.log(error) 
    ); 
} 
    } 
} 

fully working PLUNKER
（觀察控制檯和網絡選項卡）

Answer 3

我省略了userId的處理。它需要管理一組data和一組observable（每個請求userId）。

import {Injectable} from '@angular/core'; 
import {Http, Headers} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/observable/of'; 
import 'rxjs/add/operator/share'; 
import 'rxjs/add/operator/map'; 
import {Data} from './data'; 

@Injectable() 
export class DataService { 
    private url:string = 'https://cors-test.appspot.com/test'; 

    private data: Data; 
    private observable: Observable<any>; 

    constructor(private http:Http) {} 

    getData() { 
    if(this.data) { 
     // if `data` is available just return it as `Observable` 
     return Observable.of(this.data); 
    } else if(this.observable) { 
     // if `this.observable` is set then the request is in progress 
     // return the `Observable` for the ongoing request 
     return this.observable; 
    } else { 
     // example header (not necessary) 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     // create the request, store the `Observable` for subsequent subscribers 
     this.observable = this.http.get(this.url, { 
     headers: headers 
     }) 
     .map(response => { 
     // when the cached data is available we don't need the `Observable` reference anymore 
     this.observable = null; 

     if(response.status == 400) { 
      return "FAILURE"; 
     } else if(response.status == 200) { 
      this.data = new Data(response.json()); 
      return this.data; 
     } 
     // make it shared so more than one subscriber can get the result 
     }) 
     .share(); 
     return this.observable; 
    } 
    } 
} 

Plunker example

你可以找到https://stackoverflow.com/a/36296015/217408