Угловое 2 Кэширование Http

Question

Учитывая следующий код (тестовый код), что является лучшим способом иметь только один вызов требуемого файла? В настоящее время при каждом нажатии кнопки выполняется запрос XHR.

import {Injectable} from 'angular2/core'; 
import {Http} from 'angular2/http'; 

@Injectable() 
export class MyService { 
    constructor(private http: Http) {} 
    getList() { 
     return this.http.get('./public/data.json') 
      .map(res => res.json()); 
    } 
    getOne(id: number) { 
     return this.getList() 
      .map(data => data.filter(my => my.id === id)[0]); 
    } 
} 

Вот файл с данными JSon

[ 
    {"id": 1, "name": "Data 1"}, 
    {"id": 2, "name": "Data 2"}, 
    ... 
] 

Вот файл компонента. Он использует простой файл модели (который является только класс с идентификатора и имени свойства)

import {Component} from 'angular2/core'; 
import {MyService} from 'my-service'; 
import {MyModel} from 'my-model'; 

@Component({ 
    selector: 'test', 
    templateUrl: ` 
     <button (click)="getRandom()">Test</button> 
     <p>{{ selected.name }} ({{ selected.id }})</p> 
    ` 
}) 
export class MyComponent { 
    selected: MyModel; 
    constructor(private myService: MyService) {} 
    getRandom() { 
     let id = Math.floor((Math.random() * 10) + 1); 
     this.myService.getOne(id) 
      .subscribe((data: MyModel) => this.selected = data); 
    } 
} 

Я не прикладывая здесь весь материал для начальной загрузки приложения. Но это показывает эту идею.

Большое спасибо

Answer 1

Вы могли бы эффективно использовать do оператор кэшировать данные, полученные в первый раз в собственности службы:

@Injectable() 
export class MyService { 
    private data:any; 

    constructor(private http: Http) {} 

    getList() { 
    if (this.data) { 
     return Observable.of(this.data); 
    } else { 
     return this.http.get('./public/data.json') 
     .map(res => res.json()) 
     .do(data => { 
      this.data = data; 
     }); 
    } 
    } 

    getOne(id: number) { 
    return this.getList() 
     .map(data => data.filter(my => my.id === id)[0]); 
    } 
}