常用接口避免频繁请求

背景

在项目开发过程中我们难免会遇到一些通用的接口，需要在多个页面调用，拿去结果。比如我们常用的字典接口，后端通过字典配置一些数据，通常这些字典数据是不常更改的。我们通过字典接口传递不同的参数过去，获取到接口，但是往往我们会在多个页面需要获取到某一个字典的数据，这时候如果每次需要获取到字典数据的时候就重新发一个请求，会导致我们发一些无意义的请求。此时我们会有什么优化想法呢？

优化方案

解决这个问题，我们首先会想到把请求的字典数据缓存下来，然后等需要的时候再从缓存里面取出来就行了。用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;
		});