python适合大型网站开发吗,怎么做资源网站,怎样自学开网店,网页设计公司兴田德润官网多少背景
在项目开发过程中我们难免会遇到一些通用的接口#xff0c;需要在多个页面调用#xff0c;拿去结果。比如我们常用的字典接口#xff0c;后端通过字典配置一些数据#xff0c;通常这些字典数据是不常更改的。我们通过字典接口传递不同的参数过去#xff0c;获取到接…背景
在项目开发过程中我们难免会遇到一些通用的接口需要在多个页面调用拿去结果。比如我们常用的字典接口后端通过字典配置一些数据通常这些字典数据是不常更改的。我们通过字典接口传递不同的参数过去获取到接口但是往往我们会在多个页面需要获取到某一个字典的数据这时候如果每次需要获取到字典数据的时候就重新发一个请求会导致我们发一些无意义的请求。此时我们会有什么优化想法呢
优化方案
解决这个问题我们首先会想到把请求的字典数据缓存下来然后等需要的时候再从缓存里面取出来就行了。用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;});
