文章/答案/技术大牛

发布

问角2 Http缓存
EN

Stack Overflow用户

提问于 2016-04-05 08:20:59

回答 1查看 2.4K关注 0票数 0

给定以下代码(测试代码)，对请求的文件只进行一次调用的最佳方法是什么？目前，每次按下按钮时，都会执行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);
    }
}

我不会把所有的东西放在这里引导应用程序。但这说明了这个想法。

非常感谢

angularjs

typescript

angular

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-05 08:23:02

您可以利用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]);
  }
}

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36420814

复制

相似问题

问角2 Http缓存
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角2 Http缓存EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角2 Http缓存
EN