【JS】以下几行代码中，Promise对比回调的优势在哪里？

Z时代
2024-01-10
分类：技术分享

最近学ES6，了解到promise，可以通过then().then().then()的方式解决回调地狱
想请问：
像下边的简单逻辑情况下，两者的功效可能一样的。
那么promise还有什么优势吗？
如果有，在哪里，希望得到老司机码力加持，请不惜金码，敲上两行。
谢谢你的帮助

    function afterSomeSeconds( callBackFn ){
setTimeout(()=>{
callBackFn('2秒过去了，异步执行结束');
}, 2 * 1000);
};
afterSomeSeconds(function toLog(msg){
console.log(msg)
});
console.log('主线程1');
// ▲传统回调,
// ——————————————————————————————————————————————————————————
// ▼ES6的Promise
function afterSomeSecondsPromise(){
return new Promise(function(resolve, reject){
setTimeout(()=>{
resolve('3秒过去了，异步执行结束');
}, 3 * 1000);
})
}
afterSomeSecondsPromise().then(msg=>{
console.log(msg)
});console.log('主线程2');

控制台打印如下：主线程1 主线程2 2秒过去了，异步执行结束

3秒过去了，异步执行结束

回答

从本质来讲两者都能实现我们想要的功能，但真正投入开发，你会发现promise跟async/await搭配简直就是一把梭子。
利用promise跟async/await可以将异步操作改成‘伪同步’（实质还是异步），编码上思路更加顺溜了。

往往项目开发我们都会封装通用的请求函数
使用回调的封装就是

export  const Http= {
  get:function(url,data,sucCb,errCb){
    axios.get(url,{params:data})
    .then(function(res){
      if (res.data.code==200) {
          //这里可以写一些请求操作成功需要统一处理的代码，例如弹框显示成功
        sucCb(res.data.data)
      }else {
        //这里可以写一些请求操作失败需要统一处理的代码，例如弹框显示失败
        errCb(res.data.message);
      }
    })
    .catch(function(err){
      //这里可以写一些请求操作失败需要统一处理的代码，例如弹框显示失败
      errCb(err);
    })
  },
  post:function(...){...}, 
  put:function(...){...}, 
  delete:function(...){...}, }

如何调用呢

Http.get(url,data,function(res){
    //请求成功啦,做处理
},function(err){
   //请求失败啦,快做处理
})

当接口很多的时候，这种反复的操作能写到你烦。
那我们使用promise封装呢？结果会是怎么样

export  const Http= {
  get:function(url,data){
    return new Promise((resolve,reject)=>{
        axios.get(url,{params:data})
        .then(function(res){
          if (res.data.code==200) {
              //这里可以写一些请求操作成功需要统一处理的代码，例如弹框显示成功
            resolve(res.data.data)
          }else {
            //这里可以写一些请求操作失败需要统一处理的代码，例如弹框显示失败
            errCb(res.data.message);
          }
        })
        .catch(function(err){
          //这里可以写一些请求操作失败需要统一处理的代码，例如弹框显示失败
          reject(err);
        })
    })
  },
  post:function(...){...}, 
  put:function(...){...}, 
  delete:function(...){...}, }

如何调用呢

async getData(){
    let mydata = await Http.get(url,data);}

一看码量减少了一半不止，而且封装了通用请求函数，可以对api做统一管理，放在一个api.js里。例如

export const Orders = {
  get:function(){ return Http.get("deliver/oil-orders"); },
  deliver:function(){ return Http.get("deliver/oil-orders",{section:'delivering'}); },
  put:function(data){ return Http.put(`deliver/oil-orders/${data.id}`,data); }
}
export const User = {
  code:function(phone){ return Http.get("sms/code",{phone:phone}); },
  login:function(data){ return Http.post("deliver/login",data); },
  get:function(){ return Http.get("deliver/user/info",null); }
}

以后每次调用接口都是简单的‘伪同步’
let user = await User.get();
let orders = await Orders.get();

是不是更加简洁了？

有啊！

1. await 加持下更爽

在支持 await 的环境下可以直接

var msg = await afterSomeSecondsPromise();console.log(msg);

2.和其他异步操作结合，或者自身重复调用

fetch('./api')
 .then(afterSomeSecondsPromise)
 .then(msg => fetch('./api', {method: 'POST', body: msg}))
 .catch(err => console.error(err)); // .catch 可以捕获甚至 afterSomeSecondsPromise 里的异常
 afterSomeSecondsPromise()
  .then(afterSomeSecondsPromise)
  .then(afterSomeSecondsPromise);
// 试试回调版本？

我补充一点错误处理也会变优雅, 用习惯后用 throw 来做流程控制会变为常态.

区别就是
Promise 更简洁可读性好易操作功能更强大一点更加主流

你这个就好像在对比 jquery 和 vue，react ，es5和es6 不是说他差只是有更好的当然用更好的

优势最主要的就是体现在可读性上而已，你这里的例子过于简单了，所以说明不了问题，我给你从网上找了个图：
【JS】以下几行代码中，Promise对比回调的优势在哪里？