angular - 在 Angular 4 中缓存来自 HttpClient 的数据

Question

我在简化缓存方面遇到了问题。我认为有更好的方法可以做到这一点。我的问题是我必须在每个 get() 函数中执行此“缓存”代码，这会导致代码更长。任何人帮助如何以最好的方式做到这一点？谢谢。下面是我的代码。我在我的代码中所做的是在我的 news.service.ts 中执行 get() 函数以从 http 获取数据并将其订阅到我的新闻列表中。

news.service.ts

getAllNews() {

    if(this.newslist != null) {
      return Observable.of(this.newslist);
    } 

    else {

      return this.httpClient
        .get('http://sample.com/news')
        .map((response => response))
        .do(newslist => this.newslist = newslist)
        .catch(e => {
            if (e.status === 401) {
                return Observable.throw('Unauthorized');           
            }

        });
    }
  }

news-list.service.ts

 this.subscription = this.newsService.getAllNews()
      .subscribe(
        (data:any) => {
          console.log(data);
          this.newslists = data.data.data;
        },
        error => {
          this.authService.logout()
          this.router.navigate(['signin']);
        });
  }

Answer 1

如果您想要一些通用的东西，您可以将其用于不同的 API 调用或服务，那么您可以这样做:

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

class CacheItem<T> {
  url: string;
  timestampCached: number;
  data: T;
}

@Injectable({
  providedIn: 'root'
})
export class MyCachedHttpClient {
  cache: CacheItem<any>[] = [];

  constructor(
    private http: HttpClient,
  ) { }

  get<T>(url: string, cacheTime?: number, forceRefresh: boolean = false)
  : Observable<T> {
    let cachedItem: CacheItem<T> = this.getCachedItem<T>(url);

    if (cachedItem != undefined && !forceRefresh) {
      let expireDate = cachedItem.timestampCached + cacheTime;
      if (Date.now() < expireDate) {
        return of(cachedItem.data);
      }
    }

    return this.http.get<T>(url).pipe(
      map(data => {
        if (cacheTime) { // if we actually want to cache the result
          if (cachedItem == undefined) {
            cachedItem = new CacheItem();
            cachedItem.url = url;
            this.cache.push(cachedItem);
          }
          cachedItem.data = data;
          cachedItem.timestampCached = Date.now();
        }
        return data;
      })
    );
  }

  private getCachedItem<T>(url: string): CacheItem<T> {
    return this.cache.find(item => item.url == url);
  }
}

然后到处使用 MyCachedHttpClient 而不是 HttpClient。

注意事项:

• 这是针对 Angular 6/RxJS 6 的。如果您在下方，请参阅“编辑历史记录”中的代码。
• 这只是一个基本实现，它隐藏了 HttpClient 的 get() 函数的许多功能，因为我没有重新实现 options 参数在这里。