risultati di memorizzazione nella cache con il servizio http angular2

Esporre una richiesta HTTP GET attraverso un servizio e diversi componenti stanno utilizzando questi dati (dettagli del profilo su un utente). Vorrei che la prima richiesta di componente eseguisse effettivamente la richiesta HTTP GET sul server e memorizzasse in cache i risultati in modo che le richieste conseguenti utilizzino i dati memorizzati nella cache, invece di chiamare di nuovo il server.

Ecco un esempio del servizio, come consiglieresti di implementare questo livello di cache con Angular2 e typescript.

import {Inject, Injectable} from 'angular2/core'; import {Http, Headers} from "angular2/http"; import {JsonHeaders} from "./BaseHeaders"; import {ProfileDetails} from "../models/profileDetails"; @Injectable() export class ProfileService{ myProfileDetails: ProfileDetails = null; constructor(private http:Http) { } getUserProfile(userId:number) { return this.http.get('/users/' + userId + '/profile/', { headers: headers }) .map(response => { if(response.status==400) { return "FAILURE"; } else if(response.status == 200) { this.myProfileDetails = new ProfileDetails(response.json()); return this.myProfileDetails; } }); } } 

Per quanto riguarda il tuo ultimo commento, questo è il modo più semplice che riesco a pensare: crea un servizio che avrà una proprietà e quella proprietà manterrà la richiesta.

 class Service { _data; get data() { return this._data; } set data(value) { this._data = value; } } 

Così semplice. Tutto il resto del plnkr non sarebbe stato toccato. Ho rimosso la richiesta dal Servizio perché sarà istanziata automaticamente (non facciamo un new Service... , e non sono a conoscenza di un modo semplice per passare un parametro attraverso il costruttore).

Quindi, ora, abbiamo il Servizio, ciò che facciamo ora è effettuare la richiesta nel nostro componente e assegnarla ai data variabile Servizio

 class App { constructor(http: Http, svc: Service) { // Some dynamic id let someDynamicId = 2; // Use the dynamic id in the request svc.data = http.get('http://someUrl/someId/'+someDynamicId).share(); // Subscribe to the result svc.data.subscribe((result) => { /* Do something with the result */ }); } } 

Ricorda che la nostra istanza di servizio è la stessa per ogni componente, quindi quando assegniamo un valore ai data verrà riflesso in ogni componente.

Ecco il plnkr con un esempio funzionante.

Riferimento

  • Operatore di condivisione RxJS

L’operatore share () funziona solo alla prima richiesta, quando tutte le sottoscrizioni sono servite e ne crei un’altra, quindi non funzionerà, farà un’altra richiesta. (questo caso è abbastanza comune, in quanto per angular2 SPA si creano / distruggono sempre componenti)

Ho usato un object Replay per memorizzare il valore dall’osservabile http . L’osservabile ReplaySubject può servire il valore precedente ai suoi abbonati.

il servizio:

 @Injectable() export class DataService { private dataObs$ = new ReplaySubject(1); constructor(private http: HttpClient) { } getData(forceRefresh?: boolean) { // If the Subject was NOT subscribed before OR if forceRefresh is requested if (!this.dataObs$.observers.length || forceRefresh) { this.http.get('http://jsonplaceholder.typicode.com/posts/2').subscribe( data => this.dataObs$.next(data), error => { this.dataObs$.error(error); // Recreate the Observable as after Error we cannot emit data anymore this.dataObs$ = new ReplaySubject(1); } ); } return this.dataObs$; } } 

la Componente:

 @Component({ selector: 'my-app', template: `
getData from AppComponent
` }) export class AppComponent { constructor(private dataService: DataService) {} getData() { this.dataService.getData().subscribe( requestData => { console.log('ChildComponent', requestData); }, // handle the error, otherwise will break the Observable error => console.log(error) ); } } }

PLUNKER pienamente funzionante
(osserva la console e la scheda di rete)

Ho omesso la gestione degli utenti. Richiederebbe invece di gestire una matrice di data e una serie di observable (uno per ogni userId richiesto).

 import {Injectable} from '@angular/core'; import {Http, Headers} from '@angular/http'; import {Observable} from 'rxjs/Observable'; import 'rxjs/observable/of'; import 'rxjs/add/operator/share'; import 'rxjs/add/operator/map'; import {Data} from './data'; @Injectable() export class DataService { private url:string = 'https://cors-test.appspot.com/test'; private data: Data; private observable: Observable; constructor(private http:Http) {} getData() { if(this.data) { // if `data` is available just return it as `Observable` return Observable.of(this.data); } else if(this.observable) { // if `this.observable` is set then the request is in progress // return the `Observable` for the ongoing request return this.observable; } else { // example header (not necessary) let headers = new Headers(); headers.append('Content-Type', 'application/json'); // create the request, store the `Observable` for subsequent subscribers this.observable = this.http.get(this.url, { headers: headers }) .map(response => { // when the cached data is available we don't need the `Observable` reference anymore this.observable = null; if(response.status == 400) { return "FAILURE"; } else if(response.status == 200) { this.data = new Data(response.json()); return this.data; } // make it shared so more than one subscriber can get the result }) .share(); return this.observable; } } } 

Esempio di Plunker

Puoi trovare un’altra soluzione interessante su https://stackoverflow.com/a/36296015/217408