页面性能优化

减少http请求

适用页面： 类似于CRM系统的页面，下拉框数据需要接口获取，很多个不同页面都需要用到相同的下拉框

思路：可以在第一次请求的时候将请求结果存储在sessionStorge，第二次请求的时候先去仓库查找，没找到再发送请求，有的话优先使用缓存

安全性问题：可以使用字符串加密技术（这里使用AES加密

缺点：没办法实时获取下拉框接口数据，因为使用缓存 所以后台数据动态修改了之后页面上并不会变化

解决方法：返回数据为空时不缓存，不为空时设置定时器自动清除缓存，时间间隔根据业务需求自行设置

代码实例

1. 安装AES加密依赖

根据自身项目使用语言类型选择安装依赖

npm install crypto-js

npm install crypto-ts

2. ase.ts

import { AES, mode, pad, enc } from 'crypto-ts'
export const Keys = {
  aseKey : "my-key-string" // 约定好的key
}
export default class VAES {
  // 加密
  static encrypt(text: string | null) {
    return 
      AES.encrypt(text ?? '', Keys.aseKey, { mode: mode.ECB, padding: pad.PKCS7 }).toString()
  }
  // 解密
  static decrypt(text: string | null) {
    return 
      AES.decrypt(text ?? '', Keys.aseKey, { mode: mode.ECB, padding: pad.PKCS7 })
       .toString(enc.Utf8)
  }
}

3. storage.ts

import VAES from "./ase";

export const myStorage = {
  setItems: function (type: string = "session", key: string, value: any) {
    const valueAes = VAES.encrypt(JSON.stringify(value));
    if (type === "local") {
      localStorage.setItem(key, valueAes);
    } else if (type === "session") {
      sessionStorage.setItem(key, valueAes);
    }
  },
  getItems: function (type: string = "local", key: string) {
    if (type === "local") {
      return JSON.parse(VAES.decrypt(localStorage.getItem(key)));
    } else if (type === "session") {
      return JSON.parse(VAES.decrypt(sessionStorage.getItem(key)));
    }
  },
  rcRemoveItem: function (type: string = 'local', key: string) {
    if (type === 'local') {
      localStorage.removeItem(key)
    } else if (type === 'session') {
      sessionStorage.removeItem(key)
    }
  }
}

4. tools.ts

import { myStorage } from './storage'

export function geSelectOptions(req) {
  return new Promise((resolve, reject) => {
    let result = myStorage.rcGetItem('session', 'setKey')
    // 如果res中的data为空 也会重新发起请求
    if (result && result.data && result.data.length) {
      resolve(result)
    } else {
      getSelectionReq(req).then((res:any) => {
        resolve(myStorage.rcSetItem('session', 'setKey', res))
      }).catch((err) => rej(err))
    }
  })
}

5. 在页面中引入并使用

import { geSelectOptions } form '---your path---'
function geSelectOptionsList() {
    let req = {
        params: 'params'
    }
    geSelectOptions(req).then(res => {
        // 缓存返回的res 和 接口返回的res 是一样的结构
        console.log(res)
        // todo somethings
    })
}
onMounted() {
    // 生命周期中自动调用
    geSelectOptionsList()
}