Angular - 緩存http響應的最佳方式

Question

我有很多服務需要休息服務，我想緩存從服務器接收的數據以備後用。 任何人都可以告訴現金迴應的最佳方式是什麼？

Answer 1

在這裏你會找到多個答案：Angular 2 cache observable http result data

我會建議建立簡單的類可緩存<>，有助於從HTTP服務器或其他任何其他來源獲取的數據管理緩存：

declare type GetDataHandler<T> =() => Observable<T>; 

export class Cacheable<T> { 

    protected data: T; 
    protected subjectData: Subject<T>; 
    protected observableData: Observable<T>; 
    public getHandler: GetDataHandler<T>; 

    constructor() { 
     this.subjectData = new ReplaySubject(1); 
     this.observableData = this.subjectData.asObservable(); 
    } 

    public getData(): Observable<T> { 
     if (!this.getHandler) { 
     throw new Error("getHandler is not defined"); 
     } 
     if (!this.data) { 
     this.getHandler().map((r: T) => { 
      this.data = r; 
      return r; 
     }).subscribe(
      result => this.subjectData.next(result), 
      err => this.subjectData.error(err) 
     ); 
     } 
     return this.observableData; 
    } 

    public resetCache(): void { 
     this.data = null; 
    } 

    public refresh(): void { 
     this.resetCache(); 
     this.getData(); 
    } 

} 

使用方法

聲明Cacheable <> object（推測可以作爲服務的一部分）：

list: Cacheable<string> = new Cacheable<string>(); 

和處理程序：從組件

this.list.getHandler =() => { 
// get data from server 
return this.http.get(url) 
.map((r: Response) => r.json() as string[]); 
} 

電話：

//gets data from server 
List.getData().subscribe(…) 

更多細節和代碼示例在這裏：http://devinstance.net/articles/20171021/rxjs-cacheable