使用angular2 http服务缓存结果
我通过一个服务公开了一个HTTP GET请求，有几个组件正在使用此数据(用户的配置文件详细信息)。我希望第一个组件请求实际执行对服务器的HTTP GET请求，并缓存结果，以便后续请求将使用缓存的数据，而不是再次调用服务器。
这里有一个服务的例子，你建议如何用Angular2和typescript实现这个缓存层？
import {Inject, Injectable} from 'angular2/core';
import {Http, Headers} from "angular2/http";
import {JsonHeaders} from "./BaseHeaders";
import {ProfileDetails} from "../models/profileDetails";
@Injectable()
export class ProfileService{
myProfileDetails: ProfileDetails = null;
constructor(private http:Http) {
}
getUserProfile(userId:number) {
return this.http.get('/users/' + userId + '/profile/', {
headers: headers
})
.map(response => {
if(response.status==400) {
return "FAILURE";
} else if(response.status == 200) {
this.myProfileDetails = new ProfileDetails(response.json());
return this.myProfileDetails;
}
});
}
}回答 2
Stack Overflow用户
发布于 2015-12-13 04:12:04
关于你的上一个评论，这是我能想到的最简单的方法:创建一个具有一个属性的服务，该属性将保存请求。
class Service {
_data;
get data() {
return this._data;
}
set data(value) {
this._data = value;
}
}就这么简单。plnkr中的其他所有内容都将保持不变。我从服务中删除了请求，因为它将被自动实例化(我们不做new Service...，我也不知道通过构造函数传递参数的简单方法)。
现在，我们有了服务，我们现在要做的就是在组件中发出请求，并将其分配给服务变量data
class App {
constructor(http: Http, svc: Service) {
// Some dynamic id
let someDynamicId = 2;
// Use the dynamic id in the request
svc.data = http.get('http://someUrl/someId/'+someDynamicId).share();
// Subscribe to the result
svc.data.subscribe((result) => {
/* Do something with the result */
});
}
}请记住，我们的服务实例对于每个组件都是相同的，因此当我们为data赋值时，它将反映在每个组件中。
这是一个带工作示例的plnkr。
参考
Stack Overflow用户
发布于 2016-04-05 12:39:07
我省略了userId处理。它将需要管理一个data数组和一个observable数组(每个请求的userId一个)。
import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/observable/of';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import {Data} from './data';
@Injectable()
export class DataService {
private url:string = 'https://cors-test.appspot.com/test';
private data: Data;
private observable: Observable<any>;
constructor(private http:Http) {}
getData() {
if(this.data) {
// if `data` is available just return it as `Observable`
return Observable.of(this.data);
} else if(this.observable) {
// if `this.observable` is set then the request is in progress
// return the `Observable` for the ongoing request
return this.observable;
} else {
// example header (not necessary)
let headers = new Headers();
headers.append('Content-Type', 'application/json');
// create the request, store the `Observable` for subsequent subscribers
this.observable = this.http.get(this.url, {
headers: headers
})
.map(response => {
// when the cached data is available we don't need the `Observable` reference anymore
this.observable = null;
if(response.status == 400) {
return "FAILURE";
} else if(response.status == 200) {
this.data = new Data(response.json());
return this.data;
}
// make it shared so more than one subscriber can get the result
})
.share();
return this.observable;
}
}
}您可以在https://stackoverflow.com/a/36296015/217408找到另一个有趣的解决方案
https://stackoverflow.com/questions/34104277
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号