Schéma de persistance des données d'interface

Schéma de persistance des données d'interface

Contexte

Dans le projet, une grande quantité de données de configuration est demandée via l'interface pour afficher dynamiquement la page, et dans la plupart des cas, les données de configuration ne changent pas. Si vous attendez que l'interface revienne pour commencer à rendre l'interface, cela fera perdre le temps d'attente de l'utilisateur. Par conséquent, il existe ce projet - la mise en cache localisée des données d'interface.

principe

1. En mettant en indexedDBcache les données d'interface pour chaque requête.
2. Avant de demander l'interface, s'il y a des données en cache, lisez d'abord les données en cache, puis rappelez pour mettre à jour la page et mettre à jour la base de données après la mise à jour de l'interface.

Généraliser cette solution en tant que SDK

Le SDK n'expose qu'une seule méthode, il suffit d'appeler cette méthode pour intercepter et mettre en cache l'interface. Vous pouvez comprendre cette méthode comme une méthode de requête avec son propre intercepteur.

1. Méthode 1 : prise en charge entrante AxiosRequestConfig, AxiosInstance(paramètres de requête, instance de requête) et mise en cache automatique de l'interface actuelle.
2. Méthode 2 : prendre en charge les demandes personnalisées entrantes (type Promesse), intercepter automatiquement cette promesse et mettre les données en cache.
3. Prend en charge les méthodes de rappel entrantes, filtre les paramètres d'entrée et de sortie de l'interface via la méthode de rappel ou contrôle si la mise en cache est requise via la méthode de rappel.

utiliser

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

démo

1.demo1 : Héberger la requête axios au sdk : github.com/wuweikd/axi…

2.demo2, requête entrante vers sdk, rappel de course automatique : github.com/wuweikd/axi…

Adresse de l'entrepôt : github.com/wuweikd/axi…

Bibliothèques : www.npmjs.com/package/axi…