避免重复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接收到的数据，所以我拨打服务，它将检查以前的数据，如果没有可用的，它将从服务器上获取数据。

在此先感谢。

与观察到的尝试的

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); 
    } 

} 

斗争后，我只发现这是一个有效的解决方案给我2天发布计数

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

Atlast尝试和。

虽然我张贴着城市的一个问题，这与类别

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); 
    } 

}