使用angular2http服务缓存结果

Question

我通过一个服务公开了一个HTTPGET请求，几个组件正在使用这些数据（关于用户的配置文件详细信息）。我希望第一个组件请求实际执行对服务器的HTTPGET请求并缓存结果，这样后续请求将使用缓存的数据，而不是再次调用服务器。

以下是该服务的一个示例，建议如何使用Angular2和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;
                }
            });
    }
}

Answer 1

share（）操作符只处理第一个请求，当所有订阅都得到服务并且您创建了另一个订阅时，它将不起作用，它将发出另一个请求。（这种情况很常见，对于angular2 SPA，您总是创建/销毁组件）

我使用ReplaySubject来存储http可观察到的值。可观察的ReplaySubject可以为其订阅者提供以前的价值。

服务：

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

组件：

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

完全工作的柱塞
（观察控制台和网络选项卡）

Answer 2

我省略了userId处理。它将需要管理data的阵列和observable的阵列（每个请求的userId一个）。

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

Plunker示例

您可以在上找到另一个有趣的解决方案https://stackoverflow.com/a/36296015/217408

Answer 3

关于您的最后一条评论，这是我能想到的最简单的方法：创建一个具有一个属性的服务，该属性将保存请求。

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

就这么简单。plnkr中的其他一切都不会受到影响。我从服务中删除了该请求，因为它将自动实例化（我们不执行new Service...，而且我不知道通过构造函数传递参数的简单方法）。

所以，现在，我们有了服务，我们现在要做的是在组件中发出请求，并将其分配给服务变量data

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

请记住，我们的服务实例对于每个组件都是相同的，所以当我们为data分配值时，它将反映在每个组件中。

以下是plnkr和一个工作示例。

参考

• RxJS共享运营商