IONIC2高速緩存管理

Question

我已經使用IONIC 2創建了一個應用程序。我的所有頁面都需要通過REST API進行加載，並且有時很煩人，在每個選項卡中重新加載了geting而沒有更新。

現在我想通過實現緩存到我的應用程序來改善這一點。我希望它像每個http請求在首次使用當前時間戳之後保存，2小時後它將通過REST Api加載內容。

任何例子都會很棒。我試過使用這個插件https://github.com/Nodonisko/ionic-cache，但安裝後出現了一些問題，顯示錯誤。

使用Sqlite會更好，但我不知道，並尋求專家的建議。

這裏是我的主頁代碼： -

import { WebService } from '../shared/services/web.service'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    providers: [ WebService ] 
}) 

constructor(
     public navController: NavController, 
     private webService: WebService) {} 
loadPosts() { 
this.webService.getPosts(query) 
       .subscribe(data => { 
         key.posts = data;      
         loader.dismiss(); 
        }, (err) => { 
         //Fail and log the err in console 
         loader.dismiss(); 
         console.log("Some Issue"); 
         let toast = this.toastController.create({ 
          message: 'There is some issue with network', 
          duration: 10000 
         }); 
         toast.present(); 
        }); 
} 

這是我的服務提供商頁： -

import { Injectable } from '@angular/core'; 
    import { Http } from '@angular/http'; 
    import { Config } from '../../../../app/app.config'; 
    import 'rxjs/add/operator/map'; 

    @Injectable() 
    export class WordpressService { 
     constructor(private storage: Storage, private http: Http, private config: Config) {} 

     public getPosts(query) { 
      query = this.transformRequest(query); 
      let url = this.config.webApiUrl + `/allposts?${query}&_embed`; 
      return this.http.get(url) 
      .map(result => { 
       return result.json(); 
      });  
     } 
} 

感謝SANNY

Answer 1

在我看來離子的儲存應是綽綽有餘爲此，但如果您仍想使用Sqlite，則可以輕鬆修改以下代碼以使用它。

這只是一個簡單的實現，我已經在我一直在使用的項目中使用過。我已經簡化了代碼，所以請讓我知道，如果有任何的複製/粘貼問題...

// Angular 
import { Injectable } from '@angular/core'; 

export class CacheItemModel { 

    constructor(public timestamp: number, public data: any) { } 

    public isValid(): boolean { 
     if (!this.data) { 
      return false; 
     } 

     let age = Date.now() - this.timestamp; 
     return age <= 7200000; // Two hours in ms 
    } 
} 

@Injectable() 
export class CacheService { 

    private cache: Map<string, CacheItemModel>; 

    constructor() { 
     this.cache = new Map<string, CacheItemModel>(); 
    } 

    public get(url: string): any { 
     let cacheItem = this.cache.get(url); 
     if (cacheItem && cacheItem.isValid()) { 
      console.log(`[Cache]: obtained response from ${url} from the cache`); 
      return cacheItem.data; 
     } 

     console.log(`[Cache]: empty or expired for data from ${url}`); 
     return null; 
    } 

    public set(url: string, data: any): void { 
     let cacheItem = new CacheItemModel(Date.now(), data); 
     this.cache.set(url, cacheItem); 
     console.log(`[Cache]: saved data from ${url} in the cache`); 
    } 
} 

的代碼是不言自明......基本上，我們使用CacheItemModel將包含data我們想要保存在緩存中，並且timestamp檢查數據是否仍然有效。我們使用類型any作爲數據，因此我們可以在其中存儲任何類型的數據。

我們的緩存只是一個Map<string, CacheItemModel>;其中鍵是我們想要從中獲取數據的網址。所以它會像.../api/products或.../api/products/5或類似的東西。

然後，當你想使用它：

public getData(url: string): Observable<any> { 
    let cachedData = this.cacheService.get(url); 

    return cachedData 
     ? Observable.of(cachedData) 
     : this.http.get(url) 
      .map(res => res.json()) 
      .map(res => { 
       // Save the data in the cache for the next time 
       this.cacheService.set(url, res); 
       return res; 
      }); 
}