参考
深入理解 Promise 五部曲 -- 1.异步问题
深入理解 Promise 五部曲 -- 2.控制权转换问题
深入理解 Promise 五部曲 -- 3.可靠性问题
深入理解 Promise 五部曲 -- 4.扩展问题
深入理解 Promise 五部曲 -- 5.LEGO
【javascript】异步编年史，从“纯回调”到Promise
阮一峰 ES6入门 Promise
廖雪峰 JavaScript教程 Promise
理清 Promise 的状态及使用
一、异步回调的问题
1.调用函数过早
调用函数过早的最值得让人注意的问题， 是你不小心定义了一个函数，使得作为函数参数的回调可能延时调用，也可能立即调用。 也即你使用了一个可能同步调用， 也可能异步调用的回调。 这样一种难以预测的回调。
在英语世界里， 这种可能同步也可能异步调用的回调以及包裹它的函数， 被称作是 “Zalgo” （一种都市传说中的魔鬼）， 而编写这种函数的行为， 被称作是"release Zalgo" (将Zalgo释放了出来)
var a =1
zalgoFunction () {
// 这里还有很多其他代码,使得a = 2可能被异步调用也可能被同步调用
[ a = 2 ]
}
console.log(a)
结果会输出什么呢？ 如果zalgoFunction是同步的， 那么a 显然等于2， 但如果 zalgoFunction是异步的，那么 a显然等于1。于是， 我们陷入了无法判断调用影响的窘境。
这只是一个极为简单的场景， 如果场景变得相当复杂， 结果又会如何呢？你可能想说： 我自己写的函数我怎么会不知道呢？很多时候这个不确定的函数来源于它人之手，甚至来源于完全无法核实的第三方代码。我们把这种不确定的情况稍微变得夸张一些： 这个函数中传入的回调， 有99%的几率被异步调用， 有1%的几率被同步调用。
2.调用次数过多
这里取《你不知道的javascript（中卷）》的例子给大家看一看：
作为一个公司的员工，你需要开发一个网上商城， payWithYourMoney是你在确认购买后执行的扣费的函数， 由于公司需要对购买的数据做追踪分析， 这里需要用到一个做数据分析的第三方公司提供的analytics对象中的purchase函数。 代码看起来像这样
analytics.purchase( purchaseData, function () {
payWithYourMoney ()
} );
在这情况下，可能我们会忽略的一个事实是： 我们已经把payWithYourMoney 的控制权完全交给了analytics.purchase函数了，这让我们的回调“任人宰割”，这种控制权的转移， 被叫做“控制反转”。
然后上线后的一天， 数据分析公司的一个隐蔽的bug终于显露出来， 让其中一个原本只执行一次的payWithYourMoney执行了5次， 这让那个网上商城的客户极为恼怒， 并投诉了你们公司。可你们公司也很无奈， 这个时候惊奇的发现： payWithYourMoney的控制完全不在自己的手里 ！！！！！后来， 为了保证只支付一次， 代码改成了这样：
// 判断是否已经分析（支付）过一次了
var analysisFlag = true
analytics.purchase( purchaseData, function(){
if (！analysisFlag) {
payWithYourMoney ()
analysisFlag = false
}
} );
但是， 这种方式虽然巧妙， 但却仍不够简洁优雅（后文提到的Promise将改变这一点）。而且， 在回调函数的无数“痛点”中， 它只能规避掉一个， 如果你尝试规避掉所有的“痛点”，代码将比上面更加复杂而混乱。
3.太晚调用或根本没有调用
因为你失去了对回调的控制权， 你的回调可能会出现预期之外的过晚调用或者不调用的情况（为了处理这个“痛点”你又将混入一些复杂的代码逻辑）
4.吞掉报错
回调内的报错是可能被包裹回调的外部函数捕捉而不报错，（为了处理这个“痛点”你又又又将混入一些复杂的代码逻辑）
5.复杂情况下可读性差
请问这段代码的调用顺序 ？
doA( function(){
doB();
doC( function(){
doD();
} )
doE();
} );
doF();
让人一脸蒙逼的回调函数地狱
setTimeout(function (name) {
var catList = name + ','
setTimeout(function (name) {
catList += name + ',';
setTimeout(function (name) {
catList += name + ',';
setTimeout(function (name) {
catList += name + ',';
setTimeout(function (name) {
catList += name;
console.log(catList);
}, 1, 'Lion');
}, 1, 'Snow Leopard');
}, 1, 'Lynx');
}, 1, 'Jaguar');}, 1, 'Panther');
6.门
什么叫“门”？， 你可以大概理解成： 现在有一群人准备进屋，但只有他们所有人都到齐了，才能“进门” ，也就是： 只有所有的异步操作都完成了， 我们才认为它整体完成了，才能进行下一步操作
下面这个例子里， 我们试图通过两个异步请求操作，希望当a和b的取值都到达的时候才输出！！
var a, b;
function foo(x) {
a = x * 2;
if (a && b) {
baz();
}
}
function bar(y) {
b = y * 2;
if (a && b) {
baz();
}
}
function baz() {
console.log( a + b );
}
// ajax(..)是某个库中的某个Ajax函数
ajax( "http://some.url.1", foo );
ajax( "http://some.url.2", bar );
这段代码比前面那段“链式”里的回调地狱好懂多了，但是却依然存在这一些问题：我们使用了两个 if (a && b) { } 去分别保证baz是在a和b都到达后才执行的，试着思考一下：两个 if (a && b) { } 的判断条件是否可以合并到一起呢，因为这两个判断条件都试图表达同一种语意： a 和 b都到达， 能合并成一条语句的话岂不是更加简洁优雅 ？ （一切都在为Promise做铺垫哦~~~~啦啦啦）
7.竞态
一组异步操作，其中一个完成了， 这组异步操作便算是整体完成了。在下面，我们希望通过异步请求的方式，取得x的值，然后执行foo或者bar，但希望只把foo或者bar其中一个函数执行一次
var flag = true;
function foo(x) {
if (flag) {
x = x + 1
baz(x);
flag = false
}
}
function bar(x) {
if (flag) {
x = x*2
baz(x);
flag = false
}
}
function baz( x ) {
console.log( x );
}
// ajax(..)是某个库中的某个Ajax函数
ajax( "http://some.url.1", foo );
ajax( "http://some.url.2", bar );
在这里，我们设置了一个flag， 设它的初始值为true, 这时候foo或者bar在第一次执行的时候， 是可以进入if内部的代码块并且执行baz函数的， 但在if内部的代码块结束的时候， 我们把flag的值置为false,这个时候下一个函数就无法进入代码块执行了， 这就是回调对于竞态的处理。
二、Promise 的含义
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
Promise对象有以下两个特点。
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
注意，为了行文方便，本章后面的resolved统一只指fulfilled状态，不包含rejected状态。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
如果某些事件不断地反复发生，一般来说，使用 Stream 模式是比部署Promise更好的选择。
三、Promise是怎么解决问题的
1.回调过早调用
让我们回到那个回调的痛点：我们有可能会写出一个既可能同步执行， 又可能异步执行的“zalgo”函数。但Promise可以自动帮我们避免这个问题：如果对一个 Promise 调用 then(..) 的时候，即使这个 Promise是立即resolve的函数（即Promise内部没有ajax等异步操作，只有同步操作）， 提供给then(..) 的回调也是会被异步调用的，这帮助我们省了不少心
回调调用次数过多
Promise 的内部机制决定了调用单个Promise的then方法， 回调只会被执行一次，因为Promise的状态变化是单向不可逆的，当这个Promise第一次调用resolve方法， 使得它的状态从pending（正在进行）变成fullfilled（已成功）或者rejected（被拒绝）后， 它的状态就再也不能变化了。所以你完全不必担心Promise.then( function ) 中的function会被调用多次的情况回调中的报错被吞掉
要说明一点的是Promise中的then方法中的error回调被调用的时机有两种情况：
- a. Promise中主动调用了reject (有意识地使得Promise的状态被拒绝)， 这时error回调能够接收到reject方法传来的参数（reject(error)）
- b. 在定义的Promise中， 运行时候报错（未预料到的错误）， 也会使得Promise的状态被拒绝，从而使得error回调能够接收到捕捉到的错误
例如：
var p = new Promise( function(resolve,reject){
foo.bar(); // foo未定义，所以会出错！
resolve( 42 ); // 永远不会到达这里 :(
} );
p.then(
function fulfilled(){
// 永远不会到达这里 :(
},
function rejected(err){
// err将会是一个TypeError异常对象来自foo.bar()这一行
}
);
- 还有一种情况是回调根本就没有被调用，这是可以用Promise的race方法解决（下文将介绍）
// 用于超时一个Promise的工具
function timeoutPromise(delay) {
return new Promise( function(resolve,reject){
setTimeout( function(){
reject( "Timeout!" );
}, delay );
} );
}
// 设置foo()超时
Promise.race( [
foo(), // 试着开始foo()
timeoutPromise( 3000 ) // 给它3秒钟
] ).then(
function(){
// foo(..)及时完成！
},
function(err){
// 或者foo()被拒绝，或者只是没能按时完成
// 查看err来了解是哪种情况
}
);
5.链式
我们上面说了， 纯回调的一大痛点就是“金字塔回调地狱”， 这种“嵌套风格”的代码丑陋难懂，但Promise就可以把这种“嵌套”风格的代码改装成我们喜闻乐见的“链式”风格。因为then函数是可以链式调用的， 你的代码可以变成这样
Promise.then(
// 第一个异步操作
).then(
// 第二个异步操作
).then(
// 第三个异步操作
)
6.门Promise.all，竞态Promise.race见后文
四、基本用法
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。下面代码创造了一个Promise实例。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
下面是一个Promise对象的简单例子。
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value);
});
上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为resolved，就会触发then方法绑定的回调函数。
下面是一个用Promise对象实现的 Ajax 操作的例子。
const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
上面代码中，getJSON是对 XMLHttpRequest 对象的封装，用于发出一个针对 JSON 数据的 HTTP 请求，并且返回一个Promise对象。需要注意的是，在getJSON内部，resolve函数和reject函数调用时，都带有参数。
五、Promise.prototype.then()
前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});
上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。
采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function funcA(comments) {
console.log("resolved: ", comments);
}, function funcB(err){
console.log("rejected: ", err);
});
上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用funcA，如果状态变为rejected，就调用funcB。
如果采用箭头函数，上面的代码可以写得更简洁。
getJSON("/post/1.json").then(
post => getJSON(post.commentURL)
).then(
comments => console.log("resolved: ", comments),
err => console.log("rejected: ", err)
);
六、Promise.prototype.catch()
Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。
p.then((val) => console.log('fulfilled:', val))
.catch((err) => console.log('rejected', err));
// 等同于
p.then((val) => console.log('fulfilled:', val))
.then(null, (err) => console.log("rejected:", err));
下面代码中，getJSON方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数，处理这个错误。另外，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误！', error);
});
用 then 的第二个参数去处理错误不是最好的选择。因为大多数情况下我们会用到链式调用。类似：promise.then().then().then()。所以在每个 then 方法去处理错误显得代码很多余，而且也真的没必要。
catch 方法就是用来做错误统一处理。这样链式调用中我们只需要用 then 来处理 fulfilled 状态，在链的末尾加上 catch 来统一处理错误。
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(100);
}, 2000)
}).then(result => {
return result * num // 这里模拟一个错误，num 未定义
}).then(result => {
return result / 2;
}).catch(err => {
console.log(err); // num is not defined
})
这里举得例子比较简单，在 then 方法里面没有去 return 新的 promise。可以看到第一个 then 发生了错误，最后的 catch 会捕捉这个错误。catch 实际上是.then(null, rejection)的别名。
七、Promise.prototype.finally()
finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。
下面是一个例子，服务器使用 Promise 处理请求，然后使用finally方法关掉服务器。
server.listen(port)
.then(function () {
// ...
})
.finally(server.stop);
finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。
八、Promise.all()
试想一个页面聊天系统，我们需要从两个不同的URL分别获得用户的个人信息和好友列表，这两个任务是可以并行执行的，用Promise.all()实现如下：
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
console.log(results); // 获得一个Array: ['P1', 'P2']
});
九、Promise.race()
有些时候，多个异步任务是为了容错。比如，同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下，用Promise.race()实现：
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
console.log(result); // 'P1'
});
由于p1执行较快，Promise的then()将获得结果'P1'。p2仍在继续执行，但执行结果将被丢弃。