ホームページ >ウェブフロントエンド >jsチュートリアル >jsでのPromiseオブジェクトインスタンスの詳しい説明

jsでのPromiseオブジェクトインスタンスの詳しい説明

小云云
小云云オリジナル
2018-03-06 14:02:212403ブラウズ

ID 番号と実名を検証する必要がある実名検証ページがあるとします (検証後に、公安省のシステムによって検証されると仮定します)。が渡された場合、現在のフォーム情報を保存し、それを自分のバックエンドに送信します。

Promise を使用しない方法 1

//外层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 リクエストを同期すると、ページが死んでいるという感覚をユーザーに与えます。笑って泣いて];

メソッド 2 は、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 コールバックに適しています

明らかに、メソッド 1 のネストされた ajax とは異なります。方法 2 の構造は、特に多層ネストの後ではより明確になり、方法 2 の利点がさらに明らかです。複数層のネストの後では、方法 1 が非常に混乱することはさらに明白であり、方法 2 の約束を理解するのは非常に困難です。使用可能:

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

形式、構造は非常に明確です

関連する推奨事項:
Promise チュートリアルの基本的な使用法

Promise を使用してコールバックを簡素化する

js での Promise インスタンスの解析

以上がjsでのPromiseオブジェクトインスタンスの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。