本文涉及到的知识：
- Promise，all（）的使用
- js处理机制
- reduce的用法
- map的用法
- 同步异步
需求：
一个页面中需要用到多个字典数据。用于下拉选项，同时，需要将其保存为json格式。以便于key，value的相互转换。
代码语言：javascript复制data(){
return{
codeList:[]
}
},
computed:{
confPropertyTypeOptions() {
return this.codeList.length ? this.codeList[0].options : [];
},
configurationTypeOptions() {
return this.codeList.length ? this.codeList[1].options : [];
},
},
created(){
let codeType = ['confPropertyType', 'configurationType'];
let arrTemp = [];
let promiseList = codeType.map(type => getCode(type));
Promise.all(promiseList)
.then(res => {
// arrTemp = res.map(v => {
// if (Array.isArray(v.data) && v.data.length > 0) {
// const arr = v.data;
// let json = {};
// for (let i in v.data) {
// let item = v.data[i];
// json[item.ctCode] = item.ctName;
// }
// return {
// options: arr,
// json: json,
// };
// }
// return { options: [], json: {} };
// });
arrTemp = res.reduce((prev, current) => {
if (
Array.isArray(current.data) &&
current.data.length > 0
) {
const arr = current.data;
let json = {};
for (let i in current.data) {
let item = current.data[i];
json[item.ctCode] = item.ctName;
}
prev.push({
options: arr,
json: json,
});
return prev;
}
}, []);
this.codeList = arrTemp;
})
.catch(() => {
this.$message.error('查询类型失败');
});
}getCode(codetype)是一个post请求。通过字典类型获取字典数据。
最开始是这么实现的：
代码语言：javascript复制created() {
let codeType = ['confPropertyType', 'configurationType'];
codeType.forEach(code => {
getCode(code).then(res => {
if (
Array.isArray(res.data) &&
res.data.length > 0
) {
const arr = res.data;
let json = {};
for (let i in res.data) {
let item = res.data[i];
json[item.ctCode] = item.ctName;
}
this.codeList.push({
options: arr,
json: json,
});
})
})
}坑1：然而初始化页面的时候报错：compute里边的options值获取不到。为什么呢？
因为：compute属性里的this.codeList.length在第一次push的时候就不为0了，所以会报错。this.codeList.length此时的长度为1。
优化后：
用一个临时数组去保存一下请求拿到的值，等foreach完成后再去赋值给codeList变量。
代码语言：javascript复制created() {
let arrTemp = [];
let codeType = ['confPropertyType', 'configurationType'];
codeType.forEach((code,index) => {
getCode(code).then(res => {
if (
Array.isArray(res.data) &&
res.data.length > 0
) {
const arr = res.data;
let json = {};
for (let i in res.data) {
let item = res.data[i];
json[item.ctCode] = item.ctName;
}
arrTemp.push({
options: arr,
json: json,
});
})
if(index === codeType.length-1){
this.codeList = arrTemp
}
})
}坑2：然后还是报错，但是我们的思路是正确的，就是等两次请求完成后，再去处理这个结果。
这里是因为getCode()是一个异步方法，这两次异步完成的时间是不确定的，有可能你的第一个getCode（异步）还没返回结果，forEach（同步）已经完事了。
需要了解一下js的异步处理机制。你的代码是一行行往下执行的，然后遇到一个异步方法（或者异步块），程序会把这个异步放到一个异步队列中，程序继续顺序执行，同时，异步队列中的块也在执行。不过它什么时候结束，你并不知道。
这是Promise方法就发挥作用了。如我们最开始的实现。
let promiseList = codeType.map(type => getCode(type)); 这时的promiseList是一个拥有两个Promise对象元素的数组 promiseList = [new Promise(),new Promise()]
Promise.all(promiseList)，这两个post请求完成后，在.then()中可以处理res数据。
然后就是res.map()与res.reduce()的用法与区别了。
reduce（handler,target）
1.handler是一个方法 （prevent,current） => {return prevent}
prevent是我们处理后的结果，用于返回，
current是当前累加器的元素
2.target是我们的目标结果，可以是array,string,obj等
