angular - 在 Ionic 提供者中保持数据
我正在使用 Ionic 3 发起 API 请求,并在页面 Home.ts 上显示它,使用的是一个 Provider。我需要在第一次请求后数据能保留在 provider 中,这样所有使用这个 Provider 的页面都可以访问相同的信息,而不用重新请求 API。有什么最佳方法可以做到这一点?
版本:ionic CLI:3.10;Ionic 框架:3.7.1
people-service.ts:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class PeopleServiceProvider {
requisicao: any;
films: Observable<any>;
//getApiUrl : string = "https://jsonplaceholder.typicode.com/posts";
getApiUrl : string = "https://randomuser.me/api/?results=3";
constructor(public http: Http) {
this.requisicao = null;
}
// returns a Observable
getHTTP(docache: boolean) {
return this.http.get(this.getApiUrl)
.do(res => console.log(res.json()))
.map(res => res.json());
}
}
Home.ts:
import { Component } from '@angular/core';
import { NavController, LoadingController } from 'ionic-angular';
import {PeopleServiceProvider} from '../../providers/people-service/people-service';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [PeopleServiceProvider]
})
export class HomePage {
films: Observable<any>;
public people: any;
req: any;
constructor(public navCtrl: NavController, public loading: LoadingController, public peopleService: PeopleServiceProvider) {
this.people = null;
}
loadPeople(docache:boolean) {
let loader = this.loading.create({
content: 'Wait...',
});
loader.present().then(() => {
this.req = this.peopleService.getHTTP(docache);
this.req.subscribe((data)=>{
this.people = data.results;
console.log(this.people);
});
// this.peopleService.getPosts(docache);
loader.dismiss();
});
}
}
首页.html
<button ion-button secondary (click)='loadPeople(true);'>Do cache</button>
答案#1
方法1:
你可以轻松使用存储模块来做到这一点。
存储是一种存放键/值对和 JSON 对象的简便方式。存储在底层使用多种存储引擎,根据平台选择可用的最佳引擎。
// set a key/value
storage.set('name', 'myName');
// Or to get a key/value pair
storage.get('name').then((val) => {
console.log('Your name is', val);
});
方法2:
如果你需要在某个时间点使该值过期,那么你可以使用Ionic 缓存服务
关于它在这里的精彩文章。
答案#2
只需使用:
.publishReplay(1)
.refCount();
在你的 HTTP 请求可观察对象上,publishReplay 会缓存最近的值。reCount 会保持可观察对象活跃,直到没有观察者为止。
