灵璧做网站公司电商网络推广
背景
在项目开发过程中我们难免会遇到一些通用的接口，需要在多个页面调用，拿去结果。比如我们常用的字典接口，后端通过字典配置一些数据，通常这些字典数据是不常更改的。我们通过字典接口传递不同的参数过去，获取到接口，但是往往我们会在多个页面需要获取到某一个字典的数据，这时候如果每次需要获取到字典数据的时候就重新发一个请求，会导致我们发一些无意义的请求。此时我们会有什么优化想法呢？
优化方案
解决这个问题，我们首先会想到把请求的字典数据缓存下来，然后等需要的时候再从缓存里面取出来就行了。用localstrage或者vuex都可以。
我们考虑到获取数据的时候写法更简便一些，那我们请求接口的位置就需要使用Promise的写法
getCode(data).then(res => {this.XXX = res.XXX;});
代码
util.js
// 因为传参设定为数组格式，有可能存在里面部分缓存过了，部分没有缓存过的数据，需要先把缓存过的数据摘出来
function getCode(data){return new Promise((resolve, reject) => {let newCodes = [];// 判断是数组里面是否存在for (let item of data) {if (!store.getters.dictList[item] || !store.getters.dictList[item].length) {newCodes.push(item);}}if (newCodes.length) {getDictList(newCodes).then(async res => {if (res.code == 200) {newCodes.forEach(dict => {store.commit('setDict', {key: dict,value: res.result[dict] || []});});resolve(store.getters.dictList);}}).catch(error => {reject(error);});} else {resolve(store.getters.dictList);}});
}
store
state:{dictList: {} //字典表
}
mutations:{
// 设置字典表
setDict: (state, dict) => {Vue.set(state.dictList, dict.key, dict.value);// state.dictList[dict.key] = dict.value;}
}
页面中使用
let data = ['XXX', 'XX', 'X'];
getCode(data).then(res => {this.XXX= res.XXX;this.XX= res.XX;this.X= res.X;});