js Promise对象

首先,什么是Promise对象呢?

我们先来看一个小需求:
        假设我现在有个实名验证页面,需要验证身份证号码和真实姓名,实名认证是到公安部系统验证(假设在前端验证),验证通过后我再将当前表单信息保存到提交到我自己后台保存;

方法一 不用promise

//外层ajax,校验实名信息
$.ajax({
   type: "POST",
   url: "公安部检验真实姓名和身份证接口",
   dataType:"json",
   data: {name:"王尼玛",idCardNo:"4405************6543"},
   success: function(msg){     
     if(msg.status)
     {
        //真实姓名、身份证号码验证通过,提交表单数据到本系统后台
        $.ajax({
           type: "POST",
           url: "/my/info.php", //本系统后台地址
           dataType:"json",
           data: {表单数据},
           success: function(msg){     
             if(msg.success)
             {
                //保存成功              
             }
             else
             {
                //保存失败
             }
           }
        });
     }
     else
     {
        //真实姓名、身份证号码错误
     }
   }
});

我们很清楚的看到,以上例子需要嵌套ajax实现,实际需求中,凡是嵌套ajax的代码读起来都会很苦逼(多层更苦逼),当然,有的人会使用同步的ajax实现,但是同步ajax请求时会给用户页面死掉了的感觉【笑哭】;

方法二 使用promise

 new Promise(function (resolve, reject) {
            $.ajax({
                type: "POST",
                url: "公安部检验真实姓名和身份证接口",
                dataType: "json",
                data: { name: "王尼玛", idCardNo: "4405************6543" },
                success: function (msg) {
                    if (msg.status) {
                        resolve(msg); //真实姓名、身份证号码通过验证,msg会传入then方法的第一个方法参数
                    }
                    else {
                        reject(msg); //真实姓名、身份证号码未通过验证,msg会传入then方法的第二个方法参数
                    }
                }
            });
        }).then(function (resolveMsg) {
            $.ajax({
                type: "POST",
                url: "/my/info.php", //本系统后台地址
                dataType: "json",
                data: { "表单数据": "表单数据" },
                success: function (msg) {
                    if (msg.success) {
                        //保存成功              
                    }
                    else {
                        //保存失败
                    }
                }
            });
        }
        , function (rejectMsg) {
            //真实姓名、身份证号码错误
        });

总结
先说结论:Promise适用于多层嵌套的异步ajax回调;

很明显,区别于方法一的嵌套ajax,方法二的promise结构更清晰,特别是在多层嵌套后,方法二的优势更加明显,多层嵌套后方法一会变成一大坨,非常难看懂,方法二promise可以用:

new Promise().then()
    .then()
    .then()
    .catch();

格式,结构非常清晰的处理;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中的Promise对象用于处理异步操作。它是一种用于表示异步操作的结果的容器,并提供了一些方法来处理这些结果。 一个Promise对象有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。当一个操作是异步的时候,Promise对象可以返回一个pending状态的实例,并在操作完成后,可以改变为fulfilled或rejected状态。 Promise对象具有以下几个重要的方法: 1. then():用于注册一个或多个回调函数,当Promise对象的状态变为fulfilled时调用。then()方法接受两个参数,第一个参数是fulfilled状态的回调函数,第二个参数是rejected状态的回调函数。 2. catch():用于注册一个回调函数,当Promise对象的状态变为rejected时调用。 3. finally():用于注册一个回调函数,不管Promise对象的状态是fulfilled还是rejected,该回调函数都会被调用。 通过链式调用then()方法,可以实现对多个异步操作的依次执行和处理。 下面是一个简单的例子来说明Promise对象的使用: ```javascript const promise = new Promise((resolve, reject) => { setTimeout(() => { const randomNum = Math.random(); if (randomNum > 0.5) { resolve('Success'); } else { reject('Error'); } }, 1000); }); promise.then((result) => { console.log(result); }).catch((error) => { console.log(error); }).finally(() => { console.log('Promise completed'); }); ``` 在上述例子中,通过setTimeout模拟了一个异步操作,1秒后随机判断返回成功或失败。根据返回的结果,通过then()方法执行成功回调函数或通过catch()方法执行错误回调函数,最后通过finally()方法输出"Promise completed"。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值