react native之封装离线缓存框架

请求数据=>本地有无缓存+缓存数据是否过期

=>可用

=>不可用

将代码封装成一个DataStore.js文件, 这里面主要提供：从本地获取数据，从网络获取数据，创建本地时间戳，请求数据入口 

import {AsyncStorage} from 'react-native';

export default class DataStore{

  // 保存数据
  saveData(url,data,callback){
    if(!data || !url) return;
    AsyncStorage.setItem(url,JSON.stringify(this._wrapData(data)),callback);
  }
  _wrapData(data){
    return {data:data, timestamp:new Date().getTime()};
  }
  //获取本地数据
  fetchLocalData(url){
    return new Promise((resolve,reject) => {
      AsyncStorage.getItem(url,(error,result) => {
        if(!error){
          try{
            resolve(JSON.parse(result));
          }
          catch(e){
            reject(e);
            console.error(e);
          }
        }
        else {
          reject(error);
          console.error(error);
        }
      })
    })
  }


  //离线缓存的入口
  fetchData(url){

    return new Promise((resolve,reject) => {
      this.fetchLocalData(url)
          .then((wrapData) => {
              if(wrapData && DataStore.chekTimestampValid(wrapData.timestamp)){
                resolve(wrapData);
              }
              else{
                this.fetchNetData(url)
                    .then((data)=>{
                      resolve(this._wrapData(data));
                      })
                    .catch((error)=>{
                      reject(error);
                    })
                  }
          })
          .catch((error)=>{
            this.fetchNetData(url)
                .then((data)=>{
                  resolve(this._wrapData(data));
                })
                .catch((error=>{
                  reject(error);
            }))
          })
      })
  }

  //本地缓存数据有效期检查
  static chekTimestampValid(timestamp){
    const currentDate = new Date();
    const targetDate = new Date();
    targetDate.setTime(timestamp);
    if(currentDate.getMonth() !== targetDate.getMonth()) return false;
    if(currentDate.getDate() !== targetDate.getDate()) return false;
    if(currentDate.getHours() - targetDate.getHours() > 4) return false;

    return true;
  }

  //获取网络数据
  fetchNetData(url){
    return new Promise((resolve,reject)=>{
      fetch(url)
            .then((response)=>{
              if(response.ok){
                return response.json();
              }
              throw new Error('Network response not ok');
            })
            .then((responseData)=>{
              this.saveData(url,responseData)
              resolve(responseData);
            })
            .catch((error)=>{
              reject(error);
            })
    })
  }


}

 

效果图主要展示：前后请求数据的时间不变，因为没有超过过期时间