bug收集：专门解决与收集bug的网站
网址：www.bugshouji.com
场景描述：在添加表单数据时，因为表单需要的下拉列表数据很多，且都要使用axios请求数据，再进行渲染；
问题描述：使用axios 请求再绑定实现，但是进行渲染时，每一个下拉渲染都会进行一次页面刷新，而下拉列表很多的情况下，在打开页面时，就出现了页面刷新多次的情况，用户体验极差。所以对其进行了优化
代码如下：
const getDataInit= async ()=>{//获取咨询师数据
let CounselorsResult = await getListCounselors();
if(CounselorsResult.data.code==0){
data.value.CounselorsList = CounselorsResult.data.data;
}
//获取咨询课程，即所有方向
let MajorResult = await getMajorListAll();
if(MajorResult.data.code==0){
data.value.MajorList = MajorResult.data.data;
}
let ClassResult = await getClassAll();
if(ClassResult.data.code == 0){
data.value.ClassAll = ClassResult.data.data;
}
//获取录入资源信息
let resourceResult = await getEnterResource();
if(resourceResult.data.code == 0){
data.value.userList = resourceResult.data.data;
}
//业务划分
let BusinessResult = await getListBusiness();
if(BusinessResult.data.code == 0){
data.value.ListBusiness = BusinessResult.data.data;
}
}
思路：
先将下拉列表所需要的数据，全部请求回来后，再进行更新，渲染页面。
然后，想到了使用Promise.all方法。
（ 如果不知道此方法的用法的，可以看看下面的文章）
promise.all和promise.race
优化后代码：
const commonPromise= (funName:Function) =>{
return new Promise((resolve,reject)=>{
funName().then((res:any)=>{
resolve(res);
}).catch((err:any)=>{
reject(err);
})
})}
const getDataInit2 = ()=>{
Promise.all([
commonPromise(getListCounselors),
commonPromise(getMajorListAll),
commonPromise(getClassAll),
commonPromise(getEnterResource),
commonPromise(getListBusiness)]).then((res)=>{
let [CounselorsResult,
MajorResult,
ClassResult,
resourceResult,
BusinessResult
]:any = res;
if(CounselorsResult.data.code==0){
data.value.CounselorsList = CounselorsResult.data.data;
}
//获取咨询课程，即所有方向
if(MajorResult.data.code==0){
data.value.MajorList = MajorResult.data.data;
}
if(ClassResult.data.code == 0){
data.value.ClassAll = ClassResult.data.data;
}
//获取录入资源信息
if(resourceResult.data.code == 0){
data.value.userList = resourceResult.data.data;
}
//业务划分
if(BusinessResult.data.code == 0){
data.value.ListBusiness = BusinessResult.data.data;
}
}).catch((err)=>{
ElMessage.error(err);
console.log("err");
console.log(err);
});
}
