背景

新上线的项目，用户体验不是很好，领导准备就用户体验做一波优化，其中一个点就是loading效果不太好。正好我领导最近写了一篇文章，可以派上用场了，借助领导的思想Promise.all、race和any方法都是什么意思

看领导文章学习新东西

领导文章写的真不错，讲Promise.all、race和any在实际场景中的用法，非常符合场景。看文章的时候我也明白了，all失败了，但是all里面的方法该执行的都会执行。

文章里面关于loading的非常棒，我建议好好琢磨琢磨，最好是投入项目中使用

项目中的用法

let showToast = function () {
    toast.loading('加载中')
}
let hideToast = function () {
    toast.hide()
}

let timeout = function (delay, result) {
  return new Promise(resolve => {
      setTimeout(() => resolve(result), delay);
  });
}

function ajax(params) {
  if (params.hideLoading) {
    return service(params);
  }
  return new Promise((resolve,reject) => {
    let promiseInfo = service(params);// service 是封装好的axios
    Promise.race([promiseInfo, timeout(200)]).then((display) => {
      if (!display) { 
        showToast();
        Promise.all([promiseInfo, timeout(200)]).then((data) => {
            resolve(data[0])
            hideToast();
        });
      }else{// 200 毫秒内接口返回数据了，不需要loading
        resolve(display)
      }
    });
  })
}

看到代码的时候我惊讶了，

一方面是写的真好，原来还可以可以用，我get到新东西了

另一方面是原来axios还能用函数包一层在用，即导出一个A函数然后调用他和导出一个B函数（B函数里面包A函数调用），然后调用效果是一样的。函数其实是可以进过多次封装使用的（emm，高阶函数的概念吧

总结

虽然代码不是我写的，但是我觉得是真的很厉害，要我写，不知道啥时候才能写出来。现在想想，以前做的哪些项目，哪些糟糕的体验，我终于找到了解决方法了。以前我也想过要解决，但是我不知道。和大佬共事，并且跟着大佬做项目是多么幸福的一件事呀。我能get到很多东西，并且能够解决我以前的疑惑。

sunseekers

接口请求封装，我明白了函数高级用法

背景

看领导文章学习新东西

项目中的用法

总结

文档信息

Search

Table of Contents