Esquema de persistência de dados de interface

fundo

No projeto, uma grande quantidade de dados de configuração é solicitada por meio da interface para renderizar dinamicamente a página e, na maioria dos casos, os dados de configuração não são alterados. Se você esperar a interface retornar para começar a renderizar a interface, isso desperdiçará o tempo de espera do usuário. Portanto, existe este projeto - armazenamento em cache localizado de dados de interface.

princípio

Ao armazenar em indexedDBcache os dados da interface para cada solicitação.
Antes de solicitar a interface, se houver dados em cache, leia primeiro os dados em cache e, em seguida, ligue de volta para atualizar a página e atualizar o banco de dados depois que a interface for atualizada.

Esquema

Generalize esta solução como SDK

O SDK expõe apenas um método, basta chamar esse método para interceptar e armazenar em cache a interface. Você pode entender esse método como um método de solicitação com seu próprio interceptor.

Método 1: Suporte a entrada AxiosRequestConfig, AxiosInstance(parâmetros de solicitação, instância de solicitação) e cache automaticamente a interface atual.
Método 2: dê suporte a solicitações personalizadas recebidas (tipo de promessa), intercepte automaticamente essa promessa e armazene os dados em cache.
Dê suporte a métodos de retorno de chamada de entrada, filtre os parâmetros de entrada e saída da interface por meio do método de retorno de chamada ou controle se o armazenamento em cache é necessário por meio do método de retorno de chamada.

usar

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

demonstração

1.demo1: Host axios request para sdk: github.com/wuweikd/axi…

2.demo2, solicitação recebida para sdk, retorno automático de corrida: github.com/wuweikd/axi…

Endereço do armazém: github.com/wuweikd/axi…

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