ホームページ >ウェブフロントエンド >jsチュートリアル >jsでのPromiseオブジェクトインスタンスの詳しい説明
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 チュートリアルの基本的な使用法
以上がjsでのPromiseオブジェクトインスタンスの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。