避免重复 api 调用 angular2

Question

我有一个 api 类别调用，一切正常。现在，如果我需要另一个页面中的类别，它会再次调用，而我需要将其存储在本地。我只是按照我以前在 angular1 中练习的方法，但它抛出错误。注释行是我的试验。

private categories: any;
  constructor(private http: Http) { }

  getCategories(): Promise<any> {
    // if(!this.categories){
    return this.http.get(environment.API_ENDPOINT + 'categories')
      .toPromise()
      .then(this.extractData)
      .catch(this.handleError);
    // }else{
    //   console.log("call blocked");
    //   return Promise.resolve(this.categories);
    // }

  }


  private extractData(res: Response) {
    let body = res.json();
    //  this.categories = body || [];
    return body;
    //return this.categories;
  }

  private handleError(error: any): Promise<any> {

    return Promise.reject(JSON.parse(error.message || error._body || error));
  }

如何存储 api 收到的数据所以我调用该服务，它会检查以前的数据，如果不可用，它会从服务器获取数据。

提前致谢。

尝试使用 observable 和 of

import { Injectable } from '@angular/core';

import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of'; //updating import library, which threw error
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/publishReplay'
import {Cities} from '../interface/cities';
import { environment } from '../../environments/environment';
@Injectable()
export class CityService {
  private endPoint = environment.API_URL+'cities';
  private data:any;
  constructor(
    private http: Http) { }

   getAll (): Observable<Cities[]> {
     if(this.data){
        return Observable.of(this.data); // 
      }
    return this.http.get(this.endPoint)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    this.data = body || body.data || { };
    return this.data;
  }
  private handleError (error: Response | any) {
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

}

已尝试发布计数

import { Injectable } from '@angular/core';

import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/publishReplay'
import {Cities} from '../interface/cities';
import { environment } from '../../environments/environment';
@Injectable()
export class CityService {
  private endPoint = environment.API_URL+'cities';
  private data:any;
  constructor(
    private http: Http) { }

   getAll (): Observable<Cities[]> {
    return this.http.get(this.endPoint)
                    .map(this.extractData)
                    .publishReplay(1) // does not stop duplicate calls
                    .refCount() // does not stop duplicate calls
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    this.data = body || body.data || { };
    return this.data;
  }
  private handleError (error: Response | any) {
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

}

Answer 1

经过 2 天的努力，我终于找到了对我来说可行的解决方案。

虽然我发布了一个关于城市的问题，但这是关于类别的

import { Injectable } from '@angular/core';

import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import { Cities } from '../interface/cities';
import { environment } from '../../environments/environment';
import { LocalStorageService } from 'angular-2-local-storage';
@Injectable()
export class CityService {
  private endPoint = environment.API_URL + 'cities';
  private data: any;
  constructor(
    private http: Http,
    private localStorageService: LocalStorageService) { }

  getAll(): Observable<Cities[]> {
    if (this.localStorageService.get('cities')) {
      return Observable.of(this.localStorageService.get('cities'));
    } else {
      return this.http.get(this.endPoint)
        .map(this.extractData)
        .do((data) => this.localStorageService.set("cities", data))
        .catch(this.handleError);
    }
  }
  private extractData(res: Response) {
    let body = res.json();
    this.data = body || body.data || {};

    //this.localStorage.setItems$.subscribe("cities", "Hello world");
    return this.data;
  }
  private handleError(error: Response | any) {
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

}

避免重复 api 调用 angular2

Avoid duplicate api calls angular2

angular

angular2-services