接口数据持久化方案
背景
在项目中,会通过接口请求大量的配置数据动态渲染页面,而大部分情况下,配置数据并无改变。若等待接口返回再开始渲染界面,会白白浪费用户等待时间。 故有了本次项目——接口数据进行本地化缓存。
原理
- 通过
indexedDB
缓存每次请求的接口数据。 - 请求接口之前,如果发现有缓存的数据,则首先读取缓存数据,待接口更新后再回调更新页面和更新数据库。
把此方案通用为SDK
SDK只暴露一个方法,只需调用此方法即可拦截并缓存接口。你可以理解此方法为一个自带拦截器的请求方法。
- 方式一:支持传入
AxiosRequestConfig, AxiosInstance
(请求参数、请求实例),自动缓存当前接口。 - 方式二:支持传入自定义请求(Promise类型),自动拦截此promise,并缓存数据。
- 支持传入回调方法,通过回调方法过滤接口的出入参,或者通过回调方法控制是否需要缓存。
使用
import IDB from 'axios-indexeddb-sdk'
const md5 = require('md5')
// 初始化
const isRealData = ({data}) => data.code === '200' // 什么情况下存储的数据是有效的,如果发现存储的是无效数据则不读取数据库
const idb = new IDB({appKey: 'testAppKey'})
// 方式1:传入请求参数,自动缓存接口数据并响应数据(代理axios方式)
idb.httpWithIDB({
DbHttp: axios, // 传入axios实例
fetchKey: md5(JSON.stringify({param1: '123'})), // 请求的唯一key:使用md5发放用于生成请求的唯一key
funName: 'myFunName',
axiosRequestConfig: {
method: 'get',
url: 'xx/xx',
params: {param1: '123'}
},
newDataCb: (data) => {
console.log('数据改变了,返回有改变后的数据', data)
}
}).then(res => {
console.log('返回缓存数据,若无缓存数据返回请求数据', res)
})
// 方式2:传入自定义的请求方式,会拦截请求,并缓存请求结果
idb.httpWithIDB({
fetchKey: '1641379655454', // 请求的唯一key
funName: '610b9447c82fed7a0c87d245', // 请求的方法名称
fetchPromise: myFetch, // Promise<any>,未实现,请自己构造请求Promise
newDataCb: (data) => {
console.log('数据改变了,返回有改变后的数据', data)
}
}).then(res => {
console.log('返回缓存数据,若无缓存数据返回请求数据', res)
})
复制代码
demo
1.demo1: 托管axios请求到sdk: github.com/wuweikd/axi…
2.demo2, 传入请求到sdk,自动竞速回调:github.com/wuweikd/axi…