Promise 对象用于处理异步请求，保存一个异步操作最终完成（或失败）的结果
语法
new Promise(
/* executor */
function(resolve, reject) {...}
); /*
来自谷歌翻译
promise：承诺，约定
resolve：解决，决定，下决心
reject：拒绝，驳回，抵制
*/
参数：
promise 构造函数接受一个 executor 函数作为参数，该函数的两个参数分别是 resolve 和 reject，它们是两个函数（executor 函数 在 Promise 构造函数返回新对象之前被调用）。
resolve 函数被调用时，将 promise 对象从 “未完成” 变为 “成功” （即 pending --> fulfilled）
reject 函数被调用时，将 promise 对象从 “未完成” 变为 “失败” （即 pending --> rejected）
描述
promise 对象是一个代理对象（代理一个值），被代理的值在 promise 对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法，使得异步方法可以像同步方法那样返回值，但不是立即返回最终执行结果，而是一个能代表未来出现的结果的 promise 对象。
上面提到过，一个 promise 对象有三个状态：
• pending：初始状态，不是成功或失败状态
• fulfilled：成功完成
• rejected：失败
pending 状态可能触发 fulfilled 状态并传递一个值给相应的状态处理方法，也可能触发 rejected 状态并传递失败信息。当其中任一种情况发生时，promise 对象的 then 方法绑定的处理方法就会被调用。
（then 方法包含两个参数：onfulfilled 和 onrejected，也都是函数。当 promise 对象的状态为 fulfilled 时调用，调用 then 的 onfulfilled 方法；反之，调用 onrejected 方法。所以异步操作的完成和绑定处理方法之间不存在竞争）
then 方法的使用语法：
promise.then(function(value) {
// onfulfilled
}, function(error) { // 第二个参数是可选的，不一定要提供
// onrejected
});
示例：
let myFirstPromise = new Promise(function(resolve, reject){
// 当异步代码执行成功时，调用resolve()方法；失败时，调用reject()方法
// 此处，使用定时器来模拟异步代码，实际编码可能是XHR请求或HTML5的一些API方法
setTimeout(function(){
//resolve('成功！') //代码执行成功，调用resolve()方法
resolve('成功！')
}, 2000)
})
myFirstPromise.then(function(successMessage){
// successMessage 是上面调用resolve()方法传入的值
// successMessage 参数不一定非要是字符串类型，这里只是举个例子
console.log('Yay!'+successMessage)
})
console.log('看看我的位置在哪里？')
运行结果：
了解Promise的基本用法以后，通过一个小栗子来了解Promise的应用场景
// 日常开发中，可能会遇到一个函数的参数依赖于其它函数的返回值，如果其它函数的返回值不能先于执行该函数前返回，就不会得到我们预期的结果
// 此例中，执行add函数时，传入的getValueX方法直接返回2，而getValueY方法存在1秒钟的延时，当前拿不到返回值，最终导致求和失败
function add(valueX, valueY) {
console.log(valueX + valueY)
} add(getValueX(), getValueY()) // NaN (valueX -> 2, valueY -> undefined) function getValueX() {
return 2
} // 模仿一个异步请求，1秒后返回数字3
function getValueY() {
setTimeout(() => {
return 3
}, 1000)
}
function add(promiseX, promiseY) {
return Promise.all([promiseX, promiseY]).then(values => {
return values[0] + values[1]
})
}
console.log('2秒以后查看x+y求和的结果')
add(fetchX(), fetchY()).then(sum => {
console.log('x + y 的和为：' + sum) // x + y 的和为：3
})
function fetchX() {
return new Promise(resolve => {
resolve(1)
}).then(res => {
return res
})
}
function fetchY() {
return new Promise(resolve => {
setTimeout(resolve, 2000, 2)
}).then(res => {
return res
})
}
对比之下，有了Promise对象，就可以清晰地将异步操作以同步操作的流程表达出来
注意：
let promise = new Promise((resolve, reject) => {
console.log('作出承诺："将来"一定会执行！')
resolve('resolved')
})
promise.then(res => {
console.log(res)
})
console.log('test')
// 作出承诺："将来"一定会执行！
// test
// resolved
let promise = new Promise((resolve, reject) => {
resolve('ok')
throw new Error('error')
})
promise.then(res => console.log(res))
.catch(err => console.log(err))
// ok
此例中，Promise 在 resolve语句后面再抛出错误，由于此时Promise状态已经变成 resolved，再抛出错误就无效了
let p1 = new Promise(reject => {
reject(new Error('P1 fail... ...'))
})
let p2 = new Promise(resolve => {
resolve(p1)
})
p2.then(res => console.log(res))
.catch(err => console.log(err))
// Error: P1 fail... ...
4、调用 resolve 或 reject 并不会终结 Promise 的参数函数的执行
new Promise((resolve, reject) => {
resolve(1)
console.log(2)
}).then(res => {
console.log(res)
})
//
//
// 在resolve或reject前面加上return
new Promise((resolve, reject) => {
return resolve(1)
console.log(2)
}).then(res => {
console.log(res)
})
// // 后续操作放在then方法里
new Promise((resolve, reject) => {
resolve(2)
}).then(res => {
console.log(res)
console.log(1)
}) //
//
通过Promise异步加载图片的示例：
function loadImageAsync(url) {
return new Promise((resolve, reject) => {
let image = new Image()
image.onload = function() {
resolve(url)
}
image.onerror = function() {
reject(new Error(`can't find the image: ${url}`))
}
image.src = url
document.body.appendChild(image)
})
}
loadImageAsync('https://www.baidu.com/img/xinshouye_c9d9de2ff40fa160f807f75f34db4ad0.gif')
Promise.prototype.then()
它的作用是为 Promise 实例添加状态改变时的回调函数，then 方法的第一个参数是 resolved 状态的回调函数，第二个参数可选，是 rejected 状态的回调函数
promise.then(function(res) {
// success
}, function(err) {
// error
})
尽管then 方法可以接受第二个参数，但一般不建议在 then 方法里定义第二个参数（rejected 状态的回调函数），建议使用 catch 方法
Promise.prototype.catch()
它的作用是指定发生错误时的回调函数，相当于 then 方法的第二个参数 promise.then(null, rejection)
catch 方法不仅可以处理异步操作抛出的错误，还可以捕获then 方法在运行中抛出的错误。而且在语义结构上更加接近同步的写法（try /catch）
{
// 捕获 promise 实例状态从 pending 变为 rejected 的错误
let promise = new Promise((resolve, reject) => {
reject(new Error('test error'))
})
promise.then(res => console.log(res))
.catch(err => console.log(err))
// Error: test error
}
{
// 捕获 then 方法中运行时抛出的错误
let promise = new Promise(resolve => {
resolve(x / 0)
})
promise.then(res => console.log(res))
.catch(err => console.log(err))
// ReferenceError: x is not defined
}
Promise.prototype.finally()
finally 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。
finally 方法的回调函数不接受任何参数，因此，也就不知道 Promise 的状态是 fulfield 还是 rejected，表明 finally 方法不依赖于 Promise 的执行结果，与状态无关
let promise = new Promise((resolve, reject) => {
if(5 > 3) {
resolve('计算正确')
} else{
reject(new Error('计算出错了'))
}
})
promise.then(res => console.log(res))
.catch(err => console.log(err))
.finally(() => console.log('不管计算对错，都要执行fianlly'))
// 计算正确
// 不管计算对错，都要执行fianlly
Promise.all()
Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例
const p = Promise.all([p1, p2, p3]);
all 方法接受一个数组作为参数，参数必须是 Promise 实例
p 的状态由 p1、p2、p3 决定，分成两种情况
（1）、p1、p2、p3 的状态都变成 fulfilled，p 的状态才会变成 fulfilled，此时 p1、p2、p3 的返回值组成一个数组，传递给 p 的回调函数
（2）、p1、p2、p3 之中有一个被 rejected，p 的状态就会变成 rejected，此时第一个被 rejected 的实例的返回值，会传递给 p 的回调函数
应用场景：要求页面同时加载3张图片，只要有一个加载失败就会报错
function loadImgAsync(src) {
return new Promise((resolve, reject) => {
let img=document.createElement('img');
img.src=src;
img.onload=function(){
resolve(img);
}
img.onerror=function(err){
reject(err);
}
})
}
function showImgs(imgs) {
imgs.forEach(function(img){
document.body.appendChild(img);
})
}
Promise.all([
loadImgAsync('http://www.tietuku.com/static/image/icon3.png'),
loadImgAsync('http://www.tietuku.com/static/image/icon2.png'),
loadImgAsync('http://www.tietuku.com/static/image/icon1.png')
]).then(showImgs)
Promise.race()
Promise.race 方法同样用于将多个 Promise 实例，包装成一个新的 Promise 实例
const p = Promise.race([p1, p2, p3]);
Promise.all 方法看起来像是 逻辑与 的运算，只有数组中的 Promise 实例对象全部执行成功，新的 Promise 实例对象才会执行 resolved 回调函数
Promise.race 方法则像是 逻辑或 的运算，就像 race 的中文意思：竞赛。只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数
将上例需求稍作更改，只要有一个图片加载成功，即可加载到页面中，这个时候就要把all 改成 race 了
function loadImgAsync(src) {
return new Promise((resolve, reject) => {
let img=document.createElement('img');
img.src=src;
img.onload=function(){
resolve(img);
}
img.onerror=function(err){
reject(err);
}
})
}
function showImgs(img){
let p=document.createElement('p');
p.appendChild(img);
document.body.appendChild(p)
}
Promise.race([
loadImgAsync('http://www.tietuku.com/static/image/icon3.png'),
loadImgAsync('http://www.tietuku.com/static/image/icon2.png'),
loadImgAsync('http://www.tietuku.com/static/image/icon1.png')
]).then(showImgs)
