vue 请求太多时的优化方法

用户9914333

发布于 2024-01-19 15:27:55

1410

发布于 2024-01-19 15:27:55

文章被收录于专栏：bug收集bug收集

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);
  });
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-01-17，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染