接口数据持久化方案

背景

在项目中，会通过接口请求大量的配置数据动态渲染页面，而大部分情况下，配置数据并无改变。若等待接口返回再开始渲染界面，会白白浪费用户等待时间。 故有了本次项目——接口数据进行本地化缓存。

原理

1. 通过indexedDB缓存每次请求的接口数据。
2. 请求接口之前，如果发现有缓存的数据，则首先读取缓存数据，待接口更新后再回调更新页面和更新数据库。

把此方案通用为SDK

SDK只暴露一个方法，只需调用此方法即可拦截并缓存接口。你可以理解此方法为一个自带拦截器的请求方法。

1. 方式一：支持传入 AxiosRequestConfig, AxiosInstance（请求参数、请求实例），自动缓存当前接口。
2. 方式二：支持传入自定义请求（Promise类型），自动拦截此promise，并缓存数据。
3. 支持传入回调方法，通过回调方法过滤接口的出入参，或者通过回调方法控制是否需要缓存。

使用

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…

仓库地址：github.com/wuweikd/axi…

库：www.npmjs.com/package/axi…