Angular 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"},
    ...
]

这是组件文件.它使用一个简单的模型文件(它只是一个具有id和name属性的类)

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]);
  }
}