Question

在angular App中实现缓存的最佳方法是什么？

我发现了两种不同的方式： -第一个是创建像CacheService这样的简单服务，并在其中执行必要的逻辑。 -第二种选择是创建一个HttpInterceptor并捕获每个请求，如果存在则返回缓存的响应。

// CachingInterceptorService 
@Injectable()
export class CachingInterceptorService implements HttpInterceptor {

  constructor(private cacheService: CacheService) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const cachedData = this.cacheService.getCache(req);
    if (cachedData !== undefined) {
      return of(cachedData);
    } else {
      return next.handle(req);
    }
  }
}


// otherService with http
  getList(): Observable<any> {
    return this.http.get(url, option)
      .pipe(
        tap(value => {
          this.cacheService.setCache(key, value);
          return value;
        })
      );
  }

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

  cache = new Map();

  constructor() {}

  getCache(req: HttpRequest<any>): any | undefined {}

  setCache(key: string, data: any): void {}
}

是使用HttpInterceptor的好方法，还是应该仅使用CacheService而无需CachingInterceptorService？

Answer 1

我个人会尽可能采用细粒度的方法。那就是服务方法。

我会这样做，因为您很可能不想缓存您提出的每个请求。如果这样做，我必须警告您，这很可能会带来比您想象的更多的问题。知道何时清除缓存通常并不容易。

因此，经验法则：仅缓存真正需要缓存的内容。

在Angular App中实现缓存的最佳方法

1 个答案: