React Native之基于AsyncStorage的离线缓存框架设计
1.为什么要离线缓存?
宏观上来说:
- 提升用户体验: 我们要为用户提供流畅的APP操作体验,但我们无法保证所有用户的网络流畅度是好的,所以我们需要离线缓存来提升用户体验。
- 节省流量: 节省流量又分为两个层次:
- 节省服务器流量
- 节省用户手机的流量
2.离线缓存的策略
- a. 优先从本地获取数据,如果数据过时或不存在则从服务器获取数据,数据返回后同时将数据同步到本地数据库
- b. 优先从服务器获取数据,数据返回后同时将数据同步到本地数据库,如果网络故障则从本地获取数据
- c. 同时从本地和服务器获取数据,如果本地数据库返回数据则先展示本地数据,等网络数据回来后在展示网络数据同时将数据同步到本地数据库中
3.离线缓存的实现
首先我们需要实现对数的存储
3.1 数据存储
/**
* 保存数据到本地
*
* @param {} url 请求地址
* @param {} data 数据
* @param {} callback 回掉函数
* @returns
* @memberof DataStore
*/
saveData(url, data, callback) {
if (!data || !url) return;
AsyncStorage.setItem(url, JSON.stringify(this._wrapData(data)), callback);
};
上述代码我们实现了一个saveData方法,它接受一个url作为缓存数据的key,接受一个object的参数data作为保存的value,因为AsyncSorage是无法直接保存object的。所以我们需要将其序列化成json。
a策略提到了数据的有效期,所以我们要给缓存的数据加个时间戳:
/**
* 给数据添加上时间戳
*
* @param {} data 数据
* @returns
* @memberof DataStore
*/
_wrapData(data) {
return {
data: data,
timestamp: new Date().getTime()
}
};
注意:我们取的是本地时间作为时间戳,本地时间存在被纂改的风险,如果条件允许可以取服务器的时间作为时间戳
3.2 获取本地数据
/**
* 获取本地数据
*
* @param {} url 请求地址
* @returns
* @memberof DataStore
*/
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);
}
})
})
};
AsyncStorage.getItem获取的数据是String类型的,以方便使用我们需要将其反序列化成Object
3.3 获取网络数据
/**
* 获取网络数据
*
* @param {} url 请求地址
* @returns
* @memberof DataStore
*/
fetchNetData(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then((responseData) => {
this.saveData(responseData);
resolve(responseData);
})
.catch((error) => {
reject(error);
})
})
}
- 通过上述代码我们获取到网络数据,并对响应不成功的情况抛出了异常
- 在获取到网络数据的同时我们将数据同步到了本地数据库
3.4 实现缓存策略
按照a的策略: 优先从本地获取数据,如果数据过时或不存在则从服务器获取数据,我们需要这样设计我们的代码:
- 我们优先从本地获取数据
- 如果数据存在且在有效期内,我们将数据返回
- 否则我们获取网络数据
/**
* 获取数据,优先获取本地数据,如果无本地数据或本地数据过期则获取网络数据
*
* @param {} url 请求地址
* @returns
* @memberof DataStore
*/
fetchData(url) {
return new Promise((resolve, reject) => {
this.fetchLocalData(url)
.then((wrapData) => {
if (wrapData && DataStore.checkTimestampValid(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);
})
})
})
}
在上述代码中,我们通过DataStore.checkTimestampValid来判断数据是否有效:
/**
* 检查timestamp是否在有效期内
*
* @static
* @param {} timestamp 项目更新时间
* @returns
* @memberof DataStore
*/
static checkTimestampValid(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;
}
以上就是整个缓存策略的实现
React Native之基于AsyncStorage的离线缓存框架设计的更多相关文章
- React-Native(三):React Native是基于React设计的
React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...
- 基于Spring-Cloud的微服务框架设计
基于Spring-Cloud的微服务框架设计 先进行大的整体的框架整理,然后在针对每一项进行具体的详细介绍
- 房产基于Swoole的PHP RPC框架设计
房产基于Swoole的PHP RPC框架设计 https://mp.weixin.qq.com/s/XSrKEQ-0q4DvjOGTIwYYzg
- react native之封装离线缓存框架
请求数据=>本地有无缓存+缓存数据是否过期 =>可用 =>不可用 将代码封装成一个DataStore.js文件, 这里面主要提供:从本地获取数据,从网络获取数据,创建本地时间戳,请求 ...
- android翻译应用、地图轨迹、视频广告、React Native知乎日报、网络请求框架等源码
Android精选源码 android实现高德地图轨迹效果源码 使用React Native(Android和iOS)实现的 知乎日报效果源码 一款整合百度翻译api跟有道翻译api的翻译君 RxEa ...
- 对比React Native、dcloud、LuaView三个框架技术(内部)
转载自:http://www.jianshu.com/p/ee1cdb33db8d主要对比React Native和5+SDK(就是dcloud的SDK)两个: 开发语言:三个都是用其他语言来统一开发 ...
- react native之使用AsyncStorage 进行数据持久化存储
新建AsncStorageDemoPage.js import React, {Component} from 'react'; import { StyleSheet, View, Text, Bu ...
- 分享基于分布式Http长连接框架--设计模型
追求简单的设计. 也许你的设计功能很强大,但能够在满足你需求的前提下尽量简单明了设计. 当你的设计过于复杂的时候想想是不是有其它路可以走,你站在别人的角度想下,如果别人看了你的设计会不会心领神会,还是 ...
- 基于Web2.0的RIA框架设计与实现
http://www.doc88.com/p-8866851533856.html http://cdmd.cnki.com.cn/Article/CDMD-10614-1012472890.htm
随机推荐
- python(十四)新式类和旧式类
这里有个重要概念呢在下面那个链接 http://blog.csdn.net/zimou5581/article/details/53053775 http://www.cnblogs.com/btch ...
- 论文笔记系列-Neural Architecture Search With Reinforcement Learning
摘要 神经网络在多个领域都取得了不错的成绩,但是神经网络的合理设计却是比较困难的.在本篇论文中,作者使用 递归网络去省城神经网络的模型描述,并且使用 增强学习训练RNN,以使得生成得到的模型在验证集上 ...
- 用代码生成UINavigationController 与UITabBarController相结合的简单QQ框架(部分)
首先我们需要搭建一个空的项目,当然xcode6.0以后不支持直接创建空项目,所以我们需要在系统生成项目之后,删除xcode自动给你生成的控制器和storyboard,另外需要在Main Interfa ...
- 基于XML搭建Dubbo项目
(1).新建一个普通Maven项目,用于存放一些公共服务接口及公共的Bean等. 公共Bean: package cn.coreqi.entities; import java.io.Serializ ...
- 记一次Win Server 2012部署问题及解决方法
1.前言 本章内容为在win server 2012服务器部署时遇到的问题及解决方法.大致工作为:两台服务器,一台web.一台数据库:web服务器部署.net web程序,数据库服务器安装oracle ...
- python之random模块分析(一)
random是python产生伪随机数的模块,随机种子默认为系统时钟.下面分析模块中的方法: 1.random.randint(start,stop): 这是一个产生整数随机数的函数,参数start代 ...
- 【vim】保存文件并退出 :w=:wq
这两个命令实际上并不完全等价,当文件被修改时两个命令时相同的.但如果未被修改,使用 :x 不会更改文件的修改时间,而使用 :wq 会改变文件的修改时间.
- C#使用RabbitMQ
1. 说明 在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地方, ...
- C++:explicit关键字
在C++中,如果一个类的构造函数只有一个形参,在这种情况下,可以直接将一个对应于构造函数参数类型的数据直接赋值给类变量,编译器在编译时会自动进行类型转换,将对应于构造函数参数类型的数据转换为类的对象, ...
- QML C++插件dll引用
插件的创建非常简单,但是它可以复用,并且为不同的应用程序扩展类型.使用创建的插件是非常灵活的解决方案.关于插件一个很好的例子见QmlBook-In-Chinese 中最后一章介绍的例子. 本文主要备忘 ...