在Angular 4中从HttpClient缓存数据

发布时间：2020-12-17 06:55:11 所属栏目：安全来源：网络整理

导读：我有一个问题,使我的缓存更简单.我认为有更好的方法来做到这一点.我的问题是我必须在每个get()函数中执行此“缓存”代码,这会导致代码更长.有谁帮助如何做到这一点最好的方式？谢谢.这是我的代码如下.我在我的代码中做的是我在news.service.ts中执行get()函

我有一个问题,使我的缓存更简单.我认为有更好的方法来做到这一点.我的问题是我必须在每个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']);
        });
  }

解决方法

如果您打算使用通用的,可以用于不同的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参数.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!