HttpClient에서 데이터를 캐싱 4

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입니다. 메모리에 캐시 된 데이터 든, 서비스 호출이든 등등. 예를 들어, news.service.ts은 뉴스와 관련된 모든 것을위한 웹 API 클라이언트/프록시입니다.

작은 파일 인 경우 모든 뉴스 관련 캐시 관리를이 파일로 이동하거나 캐시를 관리하는 다른 구성 요소를 만들고 news.service.ts을 래핑 할 수 있습니다. 해당 구성 요소는 캐시에서 데이터를 제공하며 캐시가 없거나 만료 된 경우 news.service.ts 메쏘드를 호출합니다. 이 방법은 news.service.ts의 유일한 책임 API에 아약스 요청을 만드는 것입니다. 여기

는

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; 
    } 
} 

데이터 소비자는

는이 데이터를 필요 구성 요소의에서 뉴스 시세 것 ... 약속, 관찰 가능한 또는 오류 처리 당신에게 아이디어를 제공 할 수없는 예입니다 홈 페이지, 탐색 메뉴의 어딘가에있는 배지 알림 .... 뉴스 관련 데이터가 필요한 구성 요소 (또는 뷰)가있을 수 있습니다. 이러한 이유 때문에 이러한 구성 요소/뷰는 해당 데이터가 어디서 오는지 알 필요가 없습니다.

이러한 구성 요소가 같은 데이터

캐시는 하나 개의 장소뿐만 아니라 네트워크 관련 작업

을 관리 할 필요가있다 (그리고 가능) 요약의 주요 소스를 "데이터 공급자"를 사용합니다