インターフェイスデータの永続化スキーム

インターフェイスデータの永続化スキーム

バックグラウンド

プロジェクトでは、ページを動的にレンダリングするためにインターフェイスを介して大量の構成データが要求され、ほとんどの場合、構成データは変更されません。インターフェイスが戻ってインターフェイスのレンダリングを開始するのを待つと、ユーザーの待機時間が無駄になります。したがって、このプロジェクトがあります-インターフェイスデータのローカライズされたキャッシュ。

原理

1. 各リクエストのインターフェースデータをindexedDBキャッシュする。
2. インターフェイスを要求する前に、キャッシュされたデータがある場合は、最初にキャッシュされたデータを読み取り、次にコールバックしてページを更新し、インターフェイスの更新後にデータベースを更新します。

このソリューションをSDKとして一般化する

SDKは1つのメソッドのみを公開します。このメソッドを呼び出すだけで、インターフェイスをインターセプトしてキャッシュします。このメソッドは、独自のインターセプターを持つ要求メソッドとして理解できます。

1. 方法1：着信AxiosRequestConfig, AxiosInstance（リクエストパラメータ、リクエストインスタンス）をサポートし、現在のインターフェイスを自動的にキャッシュします。
2. 方法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)
})
复制代码

デモ

1.demo1：sdkへのホストaxiosリクエスト：github.com/wuweikd/axi…

2.demo2、SDKへの着信リクエスト、自動レーシングコールバック：github.com/wuweikd/axi…

倉庫の住所：github.com/wuweikd/axi…

ライブラリ：www.npmjs.com/package/axi…