从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');   
      } 

     }); 
    } 
    } 

新闻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

我也不太知道什么news.service.ts之间的差异news-list.service.ts是主要的概念是，你需要分开关注。最基本的分离，你可以做的是distiguishing“数据提供者”，从“数据消费者”

数据提供

这可能是任何东西，获取和管理数据。无论是内存中的缓存数据，服务调用等。在你的例子中，我认为它是一个Web API客户端/代理服务器，用于处理与新闻相关的所有事情。

如果这是一个小文件，您可以将所有与新闻相关的缓存管理移动到此文件中或创建另一个管理缓存和包装的组件news.service.ts。该组件将从其缓存中提供数据，如果缓存不存在或已过期，则会调用news.service.ts方法。这种方式news.service.ts唯一的责任就是向API发出ajax请求。

这里有没有用，可观察或错误处理只给你一个想法的例子...

class NewsProvider{ 

    constructor(){ 
     this.newsCache = []; 
    } 

    getNewsItemById(id){ 
     const item = this.newsCache.filter((i) => {i.id === id}); 

     if(item.length === 1) return item[0]; 

     this.newsCache = newsService.getAllNews(); 

     item = this.newsCache.filter((i) => {i.id === id}); 

     if(item.length === 1) return item[0]; 
     else return null; 
    } 
} 

数据消费者

这将是需要数据的任何组件，在一个新闻股票主页，导航菜单中某个地方的徽章通知....可能有任何组件（或视图）需要与新闻有关的数据。因此，这些组件/视图不需要知道数据来自何处。

这些组件将使用“的数据提供者”，因为数据

摘要

缓存仅需要（并且可以是）在一个位置以及网络相关的操作

管理的主要来源