Esquema de persistencia de datos de interfaz

antecedentes

En el proyecto, se solicita una gran cantidad de datos de configuración a través de la interfaz para representar dinámicamente la página y, en la mayoría de los casos, los datos de configuración no cambian. Si espera a que la interfaz regrese para comenzar a renderizar la interfaz, perderá el tiempo de espera del usuario. Por lo tanto, existe este proyecto: almacenamiento en caché localizado de datos de interfaz.

principio

Almacenando indexedDBen caché los datos de la interfaz para cada solicitud.
Antes de solicitar la interfaz, si hay datos almacenados en caché, primero lea los datos almacenados en caché y luego vuelva a llamar para actualizar la página y actualizar la base de datos después de actualizar la interfaz.

Esquemático

Generalizar esta solución como SDK

El SDK solo expone un método, simplemente llame a este método para interceptar y almacenar en caché la interfaz. Puede entender este método como un método de solicitud con su propio interceptor.

Método 1: admitir la entrada AxiosRequestConfig, AxiosInstance(parámetros de solicitud, instancia de solicitud) y almacenar automáticamente en caché la interfaz actual.
Método 2: admitir solicitudes personalizadas entrantes (tipo de promesa), interceptar automáticamente esta promesa y almacenar los datos en caché.
Admita métodos de devolución de llamada entrantes, filtre los parámetros de entrada y salida de la interfaz a través del método de devolución de llamada o controle si se requiere almacenamiento en caché a través del método de devolución de llamada.

utilizar

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)
})
复制代码

manifestación

1.demo1: Aloje la solicitud de axios en SDK: github.com/wuweikd/axi…

2.demo2, solicitud entrante a SDK, devolución de llamada automática de carreras: github.com/wuweikd/axi…

Dirección del almacén: github.com/wuweikd/axi…

Bibliotecas: www.npmjs.com/package/axi…