ngx data cacheable cache angular typescript

data - resultados del almacenamiento en caché con el servicio angular2 http



ngx-cacheable (3)

Con respecto a su último comentario, esta es la forma más fácil en la que puedo pensar: cree un servicio que tendrá una propiedad y esa propiedad contendrá la solicitud.

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

Tan sencillo como eso. Todo lo demás en el plnkr quedaría intacto. Eliminé la solicitud del Servicio porque se instanciará automáticamente (no hacemos un new Service... , y no conozco una manera fácil de pasar un parámetro a través del constructor).

Entonces, ahora tenemos el Servicio, lo que hacemos ahora es hacer la solicitud en nuestro componente y asignarla a los data variables del Servicio

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

Recuerde que nuestra instancia de Servicio es la misma para cada componente, por lo tanto, cuando asignamos un valor a los data , se reflejará en cada componente.

Aquí está el plnkr con un ejemplo de trabajo.

Referencia

Expongo una solicitud HTTP GET a través de un servicio, y varios componentes están utilizando estos datos (detalles del perfil de un usuario). Me gustaría que la primera solicitud de componente realice realmente la solicitud HTTP GET al servidor y almacene en caché los resultados para que las solicitudes consiguientes usen los datos almacenados en caché, en lugar de volver a llamar al servidor.

Aquí hay un ejemplo del servicio, ¿cómo recomendaría implementar esta capa de caché con Angular2 y typecript?

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


El operador share funciona solo en la primera solicitud, cuando se sirven todas las suscripciones y usted crea otra, entonces no funcionará, hará otra solicitud. (este caso es bastante común, ya que para angular2 SPA siempre se crean / destruyen componentes)

ReplaySubject un ReplaySubject para almacenar el valor del http observable. El observable ReplaySubject puede servir valor anterior a sus suscriptores.

el servicio:

@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$; } }

el componente:

@Component({ selector: ''my-app'', template: `<div (click)="getData()">getData from AppComponent</div>` }) 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 totalmente funcional
(observe la consola y la pestaña Red)


userId manejo de userId . En su lugar, sería necesario administrar una matriz de data y una matriz de observable (uno para cada userId solicitado).

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

Ejemplo de Plunker

Puede encontrar otra solución interesante en https://.com/a/36296015/217408