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

Question

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

Answer 1

您将在这里找到多个答案：Angular 2 缓存可观察的 http 结果数据

我建议构建简单的类 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();
    }

}

用法

声明 Cacheable<> 对象（大概作为服务的一部分）：

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

Answer 2

在服务内缓存数据的最简单方法是涉及

shareReplay()

example.service.ts

import { shareReplay } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({providedIn: 'root'})
export class ExampleService {

    private readonly _data: Observable<IExampleModel[]>;

    constructor(private readonly http: HttpClient) {
        this._data = 
            this.http.get<IExampleModel[]>('/api/example-entities/')
                .pipe(shareReplay());
        }
        
    getExampleEntities() : Observable<IExampleModel[]> {
        return this._data;
    }
}

可以在

here

找到另一种广泛使用的方法ReplaySubject<T>(1)。

Answer 3

您还可以使用 Angular 4+ 版本的 http 拦截器。一个非常详细和直接的实现与解释 - https://www.concretepage.com/angular/angular-caching-http-interceptor

Answer 4

对于 GET 响应，您可以尝试使用这个 get shell 组件，它非常易于使用和设置缓存配置。 ngx-http-get-shell

<ngx-http-get-shell [url]="url" [maxStale]="1000" [templateRef]="tmpl">
  <ng-template #tmpl let-data>
    {{ data | json }}
  </ng-template>
</ngx-http-get-shell>

Answer 5

使用 ReplaySubject 和 race 只是我的两分钱

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { race, ReplaySubject, tap } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class RandomNumberService {
  constructor(private http: HttpClient) {}

  #number$ = this.newCache;

  private get newCache() {
    return new ReplaySubject<number>(1);
  }

  clearCache() {
    this.#number$ = this.newCache;
  }

  getNumber() {
    return this.http
      .get<{ number: number }>(
        '/api/random-number'
      )
      .pipe(map(({ number }) => number));
  }

  getNumberCachedVersion() {
    return race(
      this.#number$,
      this.getNumber().pipe(tap((number) => this.#number$.next(number)))
    );
  }

  getNumberCachedVersionWithRefreshParameter(refresh: boolean = false) {
    if (refresh) {
      this.clearCache();
    }

    return this.getNumberCachedVersion();
  }
}