IONIC2緩存管理

Question

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

現在，我想通過對我的應用程序實施緩存來改善這一點。 我想要它，因為每個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();
            });    
        }
}

謝謝桑尼

Answer 1

在我看來，Ionic的存儲應該已經足夠了，但是如果您仍然想使用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的數據，所以我們可以存儲任何類型的IT數據的。

我們的緩存只是一個Map<string, CacheItemModel>; 其中的關鍵是我們要從中獲取數據的URL。 因此它將類似於.../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;
            });
}