Angular 2 Http Caching [duplicate]

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