「天天吃翔」连载：优化行为轨迹分页加载列表

最近接收某高科技供应商代码，据说是众多前端专家写的，拿过来看就是一坨翔，现在天天吃翔，小步快跑的优化。

今天处理行为轨迹列表getTrajectoryList函数，肉眼可见的bug，无力吐槽的代码，唉，又是加班的一天。

getTrajectoryList函数

// 获取数据
getTrajectoryList() {
 if (this.yxuseropenid) {
  //这个字段有值才调取接口
  uni.showLoading({
   title: '正在加载',
   mask: true
  });
  this.pageNo += 1;
  let params = {
   current: this.pageNo,
   size: 10,
   yxuseropenid: this.yxuseropenid
  };
  this.loadStatus = 'loading';
  selectCustomerAct(params)
   .then(res => {
    uni.hideLoading();
    if (res.code == 0 && res.data.total) {
     this.total = res.data.total || 0;
    } else {
     this.total = 0;
    }
    if (this.total == 0) this.show = true;
    if (this.pageNo == 1 || this.total == 0) this.trajectoryList = [];
    if (this.total < this.pageNo * this.pageSize) {
     this.loadStatus = 'nomore';
     this.trajectoryList = [...this.trajectoryList, ...res.data.records];
     return;
    }
    if (this.total <= this.pageNo * this.pageSize) {
     this.loadStatus = 'nomore';
    } else {
     this.loadStatus = 'loadmore';
    }
    if (res.data && res.data.records) {
     this.trajectoryList = [...this.trajectoryList, ...res.data.records];
    } else {
     this.loadStatus = 'nomore';
    }
   })
   .catch(err => {
    console.log(err);
   });
 } else {
  this.trajectoryList = [];
 }
},

Bug1：接口报错时Loading不会隐藏

uni.showLoading({
 title: '正在加载',
 mask: true
});
selectCustomerAct(params)
 .then(res => {
  uni.hideLoading();
 })
 .catch(err => {
  console.log(err);
 });

Bug2：PageNo未重置，会导致分页异常啊

this.pageNo += 1;

Bug3：并发请求会导致列表混乱

比如，两次同时请求，第1次请求相应比第2次更慢，那么第1次的数据就会显示在第2次后面

好想吐槽一下

你写代码，就不能提前返回呀，if判断写了50行代码，最后else一行代码，看起来头都大了。

优化一：使用async/await，简化结果处理逻辑，代码量少了一半

// 获取数据
async getTrajectoryList() {
 uni.showLoading({title: '正在加载', mask: true});
 this.pageNo += 1;
 const request = {
  current: this.pageNo,
  size: 10,
  id: this.salerUserId
 };
 this.loadStatus = 'loading';
 try {
  const res = await selectCustomerAct(request);
  uni.hideLoading();
  if (res.code!==0) {
   uni.showToast({title:`${res.message??''}`, icon:"none"});
   return ;
  }

  this.trajectoryList = [...this.trajectoryList, ...res.data.records];
  this.loadStatus = res.data.records.length===params.size?'loadmore':'nomore';
  this.pageNo = res.data.current;
 } catch (err) {
  console.log(err);
  uni.hideLoading();
  uni.showToast({title:`${err.message??''}`, icon:"none"});
 }
},

优化二：采用串行请求，忽略并发请求

串行请求大概步骤是：

STPE1： 重定向getTrajectoryList函数为忽略

STEP2：定义exe函数

STEP3：执行exe

STEP4：再次重定向getTrajectoryList为exe

如下所示：

async getTrajectoryList() {
 this.getTrajectoryList = async () => console.log("getTrajectoryList is running, so ignore");   // STPE1： 重定向getTrajectoryList函数

 // STEP2：定义exe函数
 const exe = async () => {
  uni.showLoading({title: '正在加载', mask: true});
  this.pageNo += 1;
  const request = {
   current: this.pageNo,
   size: 10,
   id: this.salerUserId
  };
  this.loadStatus = 'loading';
  try {
   const res = await selectCustomerAct(request);
   uni.hideLoading();
   if (res.code!==0) {
    uni.showToast({title:`${res.message??''}`, icon:"none"});
    return ;
   }

   this.trajectoryList = [...this.trajectoryList, ...res.data.records];
   this.loadStatus = res.data.records.length===request.size?'loadmore':'nomore';
   this.pageNo = res.data.current;
  } catch (err) {
   console.log(err);
   uni.hideLoading();
   uni.showToast({title:`${err.message??''}`, icon:"none"});
  }
 };

 // STEP3：执行exe
 await exe();
 
 // STEP4：再次重定向getTrajectoryList为exe
 this.getTrajectoryList = exe.bind(this);
},

最后

分享此次「吃翔」首先是整理自己的思路，解决Bug的同时愿不在引入新的Bug，其次，还是希望对「产翔」的你一定启发~~