接口缓存工具

说明

1、此工具用于需要快速出现效果，接口速度太慢的场景。小程序中比如仪表盘管理 2、此工具将第一次请求的数据放在storage中，以后进来的时候首先直接拿storage中的数据来先渲染页面，然后再对比storage中的数据跟接口数据是否有差异，如果没有差异return。有差异的时候重新渲染页面。 3、注意，使用本工具只能使用.then(res => {})来接收结果

使用

现在的写法

import { cachedApi } from '@/utils/index.js';
let arrList = this.filterPrivilege(); // 根据权限过滤
  cachedApi(listBanBoard, {}).then(res => {
    const arr = JSON.parse(JSON.stringify(arrList));
    if (res.success) {
      if (res.result.length) {
        res.result.forEach(pri => {
          const index = arr.findIndex(item => item.code === pri.privilegeCode);
          arr.splice(index, 1);
        });
      }
      // 需要展示的仪表盘
      this.filterBoard(arr);
    }
  });

原来的写法

let arrList = this.filterPrivilege(); // 根据权限过滤
listBanBoard({}).then(res => {
  const arr = JSON.parse(JSON.stringify(arrList));
    if (res.success) {
      if (res.result.length) {
        res.result.forEach(pri => {
          const index = arr.findIndex(item => item.code === pri.privilegeCode);
          arr.splice(index, 1);
        });
      }
      // 需要展示的仪表盘
      this.filterBoard(arr);
    }
})

参数说明

参数

参数	描述	类型	可选值	默认值
api	传递需要用到的api	Function	-	-
params	传递api的参数	Object	-	-

工具源码及综合示例参考

cachApi源码 (opens new window) 综合实例 (opens new window)