Question

我正在使用Ionic 3发出API请求，并使用提供商将其显示在 Home.ts 页面上。我需要在第一个请求之后将数据保留在提供程序中，以便使用此提供程序的所有页面都可以访问相同的信息，而无需重新请求API。这样做的最佳方式是什么？

版本：离子CLI：3.10; 离子框架：3.7.1

人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();

      });

  }
}

Home.html中

  <button ion-button secondary (click)='loadPeople(true);'>Do cache</button>

Answer 1

方法1：

您可以轻松使用storage module。

存储是存储键/值对和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 cache service

关于it is here的精彩文章。

Answer 2

只需使用：

.publishReplay(1)
.refCount();

在您的http请求上可观察。 publishReplay缓存最新值。 reCount使观察者保持活着，直到没有更多的观察者。

Answer 3

您可以将结果存储在提供程序的类成员中。提供商的生命周期取决于提供者的生命周期：只需将其从特定页面的providers移动到您的应用模块的providers即可。这样，只要应用程序还活着，它就会保持活力。

将数据保存在离子提供程序

3 个答案: