首先,什么是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();
格式,结构非常清晰的处理;