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

发布于 2022-09-11 16:29:13 字数 998 浏览 30 评论 0

最近学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秒过去了，异步执行结束

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清风无影 2022-09-18 16:29:13

从本质来讲两者都能实现我们想要的功能，但真正投入开发，你会发现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();

是不是更加简洁了？

回复收藏 0

永不分离 2022-09-18 16:29:13

有啊！

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);
 
// 试试回调版本？

回复收藏 0