网站搜索

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 会保持可观察对象活跃,直到没有观察者为止。