Angular - 缓存 http 响应的最佳方式

Question

我有很多服务请求休息服务，我想缓存从服务器接收的数据以供进一步使用。谁能告诉我们什么是兑现响应的最佳方式？

Answer 1

您会在这里找到多个答案:Angular 2 cache observable http result data

我建议构建简单的类 Cacheable<>，它有助于管理从 http 服务器或其他任何其他来源检索到的数据的缓存:

declare type GetDataHandler<T> = () => Observable<T>;

export class Cacheable<T> {

    protected data: T;
    protected subjectData: Subject<T>;
    protected observableData: Observable<T>;
    public getHandler: GetDataHandler<T>;

    constructor() {
      this.subjectData = new ReplaySubject(1);
      this.observableData = this.subjectData.asObservable();
    }

    public getData(): Observable<T> {
      if (!this.getHandler) {
        throw new Error("getHandler is not defined");
      }
      if (!this.data) {
        this.getHandler().map((r: T) => {
          this.data = r;
          return r;
        }).subscribe(
          result => this.subjectData.next(result),
          err => this.subjectData.error(err)
        );
      }
      return this.observableData;
    }

    public resetCache(): void {
      this.data = null;
    }

    public refresh(): void {
      this.resetCache();
      this.getData();
    }

}

用法

声明可缓存<>对象(大概是服务的一部分):

list: Cacheable<string> = new Cacheable<string>();

和处理程序:

this.list.getHandler = () => {
// get data from server
return this.http.get(url)
.map((r: Response) => r.json() as string[]);
}

从组件调用:

//gets data from server
List.getData().subscribe(…)

更多细节和代码示例在这里:http://devinstance.net/articles/20171021/rxjs-cacheable