1、案例
Promise用于对异步操作的进行数据处理，为异步操作的回调函数提供接口，让其在可同步执行，而不用再将回调函数进行层层嵌套。
例如，我们以下面的例子为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<div id="app"></div>
<template id="template">
<p></p>
</template>
</body>
<script type="text/javascript">
var app = document.querySelector('#app');
var p = document.getElementById('template').content.querySelector('p');
var p1 = p.cloneNode(true);
var p2 = p.cloneNode(true);
var p3 = p.cloneNode(true);
var i = 0, html;
window.setTimeout(() => {
p1.innerHTML = '<p>aaaaaaaa</p>';
app.appendChild(p1);
}, 100);
window.setTimeout(() => {
p2.innerHTML = '<p>bbbbbbbb</p>';
app.appendChild(p2);
}, 200);
window.setTimeout(() => {
p3.innerHTML = '<p>cccccccc</p>';
app.appendChild(p3);
}, 50);
</script>
</html>
对于异步函数，如果不进行回调函数嵌套，我们就无法保证其执行顺序。但是有了Promise对象之后，我们可以进行链式书写，从而保证回调执行的顺序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<div id="app"></div>
<template id="template">
<p></p>
</template>
</body>
<script type="text/javascript">
var app = document.querySelector('#app');
var p = document.getElementById('template').content.querySelector('p');
var p1 = p.cloneNode(true);
var p2 = p.cloneNode(true);
var p3 = p.cloneNode(true);
var i = 0, html;
var promise1 = new Promise((resolve, reject) => {
window.setTimeout(() => {
p1.innerHTML = '<p>aaaaaaaa</p>';
resolve(p1, promise2);
}, 100);
});
var promise2 = new Promise((resolve, reject) => {
window.setTimeout(() => {
p2.innerHTML = '<p>bbbbbbbb</p>';
resolve(p2, promise3);
}, 200);
});
var promise3 = new Promise((resolve, reject) => {
window.setTimeout(() => {
p3.innerHTML = '<p>cccccccc</p>';
resolve(p3, null);
}, 50);
});
promise1.then((node) => {
app.appendChild(node);
return promise2;
}).then((node) => {
app.appendChild(node);
return promise3;
}).then((node) => {
app.appendChild(node);
});
</script>
</html>
2、Promise的基本语法
Promise对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
根据以上描述，我们可以知道，Promise对象可以代理一个异步处理的结果。所以Promise有fulfilled（已成功）状态和rejected（已失败）两个状态，对应Promise构造函数的两个回调函数：resolve和reject。
new Promise( function(resolve, reject) {...} /* executor */ );
在执行回调函数之前，Promise的状态为pedding，当执行resolve后状态变为fulfilled，执行reject之后装态变为rejected。
原型方法：
//添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise。
Promise.prototype.catch(onRejected)
//添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise。当这个回调函数被调用，新 promise 将以它的返回值来resolve，否则如果当前promise 进入fulfilled状态，则以当前promise的完成结果作为新promise的完成结果.
Promise.prototype.then(onFulfilled, onRejected)
//无论当前promise的状态是完成(fulfilled)还是失败(rejected)，都会执行
Promise.prototype.finally(onFinally)
3、Jquery中的deferred对象
Jquery中的deferred对象是原生Promise接口的实现。用法大同小异。
在ajax中我们可以直接使用，因为1.5版本之后，ajax返回的值就是一个defeered对象。
旧的写法：
$.ajax({
url: "test.html",
success: function(){
alert("成功了！");
},
error:function(){
alert("出错啦！");
}
});
新的写法：
//更简洁的链式写法
$.ajax("test.html")
.done(function(){ alert("成功了！"); })
.fail(function(){ alert("出错啦！"); });
而且deferred对象不仅仅是在ajax中使用，也可以在任何回调中进行使用。
比如：
var $dfd = $.Deferred();//创建一个deferred实例对象
var success = 0;//模拟成功失败状态
window.setTimeout(() => {
if(success === 0){
$dfd.resolve();
}else{
$dfd.reject();
}
}, 100);
//两种写法：
$dfd.done(function(){
alert('成功');
}).fail(function(){
alert('失败');
});
//------另一种写法
$dfd.then(function(){
alert('成功');
},function(){
alert('失败');
});
同样的道理，使用deferred对象重写书写上面的案例：
<head>
<meta charset="utf-8">
<title>Index</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="app"></div>
<template id="template">
<p></p>
</template>
</body>
<script type="text/javascript">
var app = $('#app');
var p = $('#template')[0].content.querySelector('p');
var p1 = p.cloneNode(true);
var p2 = p.cloneNode(true);
var p3 = p.cloneNode(true);
var i = 0, html;
var dfd1 = $.Deferred(),
dfd2 = $.Deferred(),
dfd3 = $.Deferred();
window.setTimeout(() => {
p1.innerHTML = '<p>aaaaaaaa</p>';
dfd1.resolve();
}, 100);
window.setTimeout(() => {
p2.innerHTML = '<p>bbbbbbbb</p>';
dfd2.resolve();
}, 200);
window.setTimeout(() => {
p3.innerHTML = '<p>cccccccc</p>';
dfd3.resolve();
}, 50);
dfd1.done(function(){
app.append(p1);
return dfd2;
}).done(function(){
app.append(p2);
return dfd3;
}).done(function(){
app.append(p3);
});
</script>
</html>
另外：jquery还提供了一个同时监听多个回调的方法。$.when()，返回值为defferred对象。
$.when()接受多个deferred对象作为参数，当它们全部运行成功后，才调用resolved状态的回调函数，但只要其中有一个失败，就调用rejected状态的回调函数。它相当于将多个非同步操作，合并成一个。实质上，when方法为多个deferred对象，返回一个单一的promise对象。
$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( "/lists.php" )
).then(successFunc, failureFunc);
参考来源：
https://wangdoc.com/javascript/async/promise.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises
http://javascript.ruanyifeng.com/jquery/deferred.html#toc0
网友评论