首頁 >web前端 >js教程 >js中Promise物件實例詳解

js中Promise物件實例詳解

小云云
小云云原創
2018-03-06 14:02:212403瀏覽

假設我現在有個實名驗證頁面,需要驗證身分證號碼和真實姓名,實名認證是到公安部系統驗證(假設在前端驗證),驗證透過後我再將當前表單資訊儲存到提交給我自己後台保存;

方法一不用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();

格式,結構非常清晰的處理;

#相關推薦:
Promise的基本使用方法教程

使用Promise簡化回呼

#js中promise實例解析

以上是js中Promise物件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn