Promise是什么
所谓Promise，简单说就是一个容器，内里保留着某个将来才会终了的事宜（通常是一个异步操纵）的效果。从语法上说，Promise 是一个对象，从它能够猎取异步操纵的音讯。Promise 供应一致的 API，种种异步操纵都能够用一样的要领举行处置惩罚。
Promise是处置惩罚异步编码的一个处理方案，在Promise涌现之前，异步代码的编写都是经过过程回调函数来处置惩罚的，回调函数自身没有任何题目，只是当屡次异步回调有逻辑关联时就会变得庞杂：
const fs = require('fs');
fs.readFile('1.txt', (err,data) => {
fs.readFile('2.txt', (err,data) => {
fs.readFile('3.txt', (err,data) => {
//能够另有后续代码
});
});
});上面读取了3个文件，它们是层层递进的关联，能够看到多个异步代码套在一同不是纵向生长的，而是横向，不管是从语法上照样从排错上都不好，因而Promise的涌现能够处理这一痛点。
上述代码假如改写成Promise版是如许：
const util = require('util');
const fs = require('fs');
const readFile = util.promisify(fs.readFile);
readFile('1.txt')
.then(data => {
return readFile('2.txt');
}).then(data => {
return readFile('3.txt');
}).then(data => {
//...
});能够看到，代码是从上至下纵向生长了，越发相符人们的逻辑。
下面手写一个Promise，依据Promises/A+范例，能够参照范例原文：
Promises/A+范例
手写完成Promise是一道前端典范的口试题，比方美团的口试就是必考题，Promise的逻辑照样比较庞杂的，斟酌的逻辑也比较多，下面总结手写Promise的症结点，和怎样运用代码来完成它。
Promise代码基础组织
实例化Promise对象时传入一个函数作为实行器，有两个参数（resolve和reject）离别将效果变成胜利态和失利态。我们能够写出基础组织
function Promise(executor) {
this.state = 'pending'; //状况
this.value = undefined; //胜利效果
this.reason = undefined; //失利缘由
function resolve(value) {
}
function reject(reason) {
}
}
module.exports = Promise;个中state属性保留了Promise对象的状况，范例中指明，一个Promise对象只要三种状况：守候态（pending）胜利态（resolved）和失利态（rejected）。
当一个Promise对象实行胜利了要有一个效果，它运用value属性保留；也有能够因为某种缘由失利了，这个失利缘由放在reason属性中保留。
then要领定义在原型上
每一个Promise实例都有一个then要领，它用来处置惩罚异步返回的效果，它是定义在原型上的要领，我们先写一个空要领做好预备：
Promise.prototype.then = function (onFulfilled, onRejected) {
};当实例化Promise时会立时实行
当我们本身实例化一个Promise时，实在行器函数（executor）会立时实行，这是肯定的：
let p = new Promise((resolve, reject) => {
console.log('实行了');
});运转效果：
实行了因而，当实例化Promise时，组织函数中就要立时挪用传入的executor函数实行
function Promise(executor) {
var _this = this;
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
executor(resolve, reject); //立时实行
function resolve(value) {}
function reject(reason) {}
}已是胜利态或是失利态不可再更新状况
范例中划定，当Promise对象已过pending状况转变成了胜利态（resolved）或是失利态（rejected）就不能再次变动状况了。因而我们在更新状况时要推断，假如当前状况是pending（守候态）才可更新：
function resolve(value) {
//当状况为pending时再做更新
if (_this.state === 'pending') {
_this.value = value;//保留胜利效果
_this.state = 'resolved';
}
}
function reject(reason) {
//当状况为pending时再做更新
if (_this.state === 'pending') {
_this.reason = reason;//保留失利缘由
_this.state = 'rejected';
}
}以上能够看到，在resolve和reject函数平离别加入了推断，只要当前状况是pending才可举行操纵，同时将胜利的效果和失利的缘由都保留到对应的属性上。以后将state属性置为更新后的状况。
then要领的基础完成
当Promise的状况发作了转变，不管是胜利或是失利都邑挪用then要领，所以，then要领的完成也很简单，依据state状况来挪用差别的回调函数即可：
Promise.prototype.then = function (onFulfilled, onRejected) {
if (this.state === 'resolved') {
//推断参数范例，是函数实行之
if (typeof onFulfilled === 'function') {
onFulfilled(this.value);
}
}
if (this.state === 'rejected') {
if (typeof onRejected === 'function') {
onRejected(this.reason);
}
}
};须要一点注重，范例中说清晰明了，onFulfilled 和 onRejected 都是可选参数，也就是说能够传也能够不传。传入的回调函数也不是一个函数范例，那怎样办？范例中说疏忽它就好了。因而须要推断一下回调函数的范例，假如明确是个函数再实行它。
让Promise支撑异步
代码写到这里好像基础功能都完成了，然则另有一个很大的题目，目前此Promise还不支撑异步代码，假如Promise中封装的是异步操纵，then要领无计可施：
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}，500);
});
p.then(data => console.log(data)); //没有任何效果运转以上代码发明没有任何效果，本意是等500毫秒后实行then要领，那里有题目呢？缘由是setTimeout函数使得resolve是异步实行的，有耽误，当挪用then要领的时刻，此时此刻的状况照样守候态（pending），因而then要领即没有挪用onFulfilled也没有挪用onRejected。
这个题目怎样处理？我们能够参照宣布定阅形式，在实行then要领时假如还在守候态（pending），就把回调函数暂时寄放到一个数组里，当状况发作转变时顺次从数组中掏出实行就好了，清晰这个思绪我们完成它，起首在类上新增两个Array范例的数组，用于存放回调函数：
function Promise(executor) {
var _this = this;
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
this.onFulfilledFunc = [];//保留胜利回调
this.onRejectedFunc = [];//保留失利回调
//别的代码略...
}如许当then要领实行时，若状况还在守候态（pending），将回调函数顺次放入数组中：
Promise.prototype.then = function (onFulfilled, onRejected) {
//守候态，此时异步代码还没有走完
if (this.state === 'pending') {
if (typeof onFulfilled === 'function') {
this.onFulfilledFunc.push(onFulfilled);//保留回调
}
if (typeof onRejected === 'function') {
this.onRejectedFunc.push(onRejected);//保留回调
}
}
//别的代码略...
};寄放好了回调，接下来就是当状况转变时实行就好了：
function resolve(value) {
if (_this.state === 'pending') {
_this.value = value;
//顺次实行胜利回调
_this.onFulfilledFunc.forEach(fn => fn(value));
_this.state = 'resolved';
}
}
function reject(reason) {
if (_this.state === 'pending') {
_this.reason = reason;
//顺次实行失利回调
_this.onRejectedFunc.forEach(fn => fn(reason));
_this.state = 'rejected';
}
}至此，Promise已支撑了异步操纵，setTimeout耽误后也可准确实行then要领返回效果。
链式挪用
Promise处置惩罚异步代码最壮大的处所就是支撑链式挪用，这块也是最庞杂的，我们先梳理一下范例中是怎样定义的：
- 每一个then要领都返回一个新的Promise对象（道理的中心）
- 假如then要领中显现地返回了一个Promise对象就以此对象为准，返回它的效果
- 假如then要领中返回的是一个一般值（如Number、String等）就运用此值包装成一个新的Promise对象返回。
- 假如then要领中没有return语句，就视为返回一个用Undefined包装的Promise对象
- 若then要领中涌现异常，则挪用失利态要领（reject）跳转到下一个then的onRejected
- 假如then要领没有传入任何回调，则继承向下通报（值的通报特征）。
范例中说的很抽像，我们能够把不好邃晓的点运用代码演示一下。
个中第3项，假如返回是个一般值就运用它包装成Promise，我们用代码来演示：
let p =new Promise((resolve,reject)=>{
resolve(1);
});
p.then(data=>{
return 2; //返回一个一般值
}).then(data=>{
console.log(data); //输出2
});可见，当then返回了一个一般的值时，下一个then的胜利态回调中即可取到上一个then的返回效果，说清晰明了上一个then恰是运用2来包装成的Promise，这相符范例中说的。
第4项，假如then要领中没有return语句，就视为返回一个用Undefined包装的Promise对象
let p = new Promise((resolve, reject) => {
resolve(1);
});
p.then(data => {
//没有return语句
}).then(data => {
console.log(data); //undefined
});能够看到，当没有返回任何值时不会报错，没有任何语句时实际上就是return undefined;行将undefined包装成Promise对象传给下一个then的胜利态。
第6项，假如then要领没有传入任何回调，则继承向下通报，这是什么意思呢？这就是Promise中值的穿透，照样用代码演示一下：
let p = new Promise((resolve, reject) => {
resolve(1);
});
p.then(data => 2)
.then()
.then()
.then(data => {
console.log(data); //2
});以上代码，在第一个then要领以后一连挪用了两个空的then要领 ，没有传入任何回调函数，也没有返回值，此时Promise会将值一向向下通报，直到你吸收处置惩罚它，这就是所谓的值的穿透。
如今能够邃晓链式挪用的道理，不管是何种状况then要领都邑返回一个Promise对象，如许才会有下个then要领。
搞清晰了这些点，我们就能够着手完成then要领的链式挪用，一同来完美它：
Promise.prototype.then = function (onFulfilled, onRejected) {
var promise2 = new Promise((resolve, reject) => {
//代码略...
}
return promise2;
};起首，不管何种状况then都返回Promise对象，我们就实例化一个新promise2并返回。
接下来就处置惩罚依据上一个then要领的返回值来天生新Promise对象，因为这块逻辑较庞杂且有许多处挪用，我们抽离出一个要领来操纵，这也是范例中申明的：
/**
* 剖析then返回值与新Promise对象
* @param {Object} promise2 新的Promise对象
* @param {*} x 上一个then的返回值
* @param {Function} resolve promise2的resolve
* @param {Function} reject promise2的reject
*/
function resolvePromise(promise2, x, resolve, reject) {
//...
}resolvePromise要领用来封装链式挪用发生的效果，下面我们离别一个个状况的写出它的逻辑，起首范例中申明，假如promise2和 x 指向统一对象，就运用TypeError作为缘由转为失利。原文以下：
If promise and x refer to the same object, reject promise with a TypeError as the reason.
这是什么意思？实在就是轮回援用，当then的返回值与新天生的Promise对象为统一个（援用地点雷同），则会抛出TypeError毛病：
let promise2 = p.then(data => {
return promise2;
});运转效果：
TypeError: Chaining cycle detected for promise #<Promise>很显然，假如返回了本身的Promise对象，状况永远为守候态（pending），再也没法成为resolved或是rejected，顺序会死掉，因而起首要处置惩罚它：
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
reject(new TypeError('Promise发作了轮回援用'));
}
}接下来就是分种种状况处置惩罚。当x就是一个Promise，那末就实行它，胜利即胜利，失利即失利。若x是一个对象或是函数，再进一步处置惩罚它，不然就是一个一般值：
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
reject(new TypeError('Promise发作了轮回援用'));
}
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
//多是个对象或是函数
} else {
//不然是个一般值
resolve(x);
}
}此时范例中申明，如果个对象，则尝试将对象上的then要领掏出来，此时假如报错，那就将promise2转为失利态。原文：
If retrieving the property x.then results in a thrown exception e, reject promise with e as the reason.
function resolvePromise(promise2, x, resolve, reject) {
//代码略...
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
//多是个对象或是函数
try {
let then = x.then;//掏出then要领援用
} catch (e) {
reject(e);
}
} else {
//不然是个一般值
resolve(x);
}
}多说几句，为何取对象上的属性有报错的能够？Promise有许多完成（bluebird，Q等），Promises/A+只是一个范例，人人都按此范例来完成Promise才有能够通用，因而一切失足的能够都要斟酌到，假定另一个人完成的Promise对象运用Object.defineProperty()歹意的在取值时抛错，我们能够防备代码涌现Bug。
此时，假如对象中有then，且then是函数范例，就能够认为是一个Promise对象，以后，运用x作为this来挪用then要领。
If then is a function, call it with x as this
//其他代码略...
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
//多是个对象或是函数
try {
let then = x.then;
if (typeof then === 'function') {
//then是function，那末实行Promise
then.call(x, (y) => {
resolve(y);
}, (r) => {
reject(r);
});
} else {
resolve(x);
}
} catch (e) {
reject(e);
}
} else {
//不然是个一般值
resolve(x);
}如许链式写法就基础完成了。然则另有一种极度的状况，假如Promise对象转为胜利态或是失利时传入的照样一个Promise对象，此时应当继承实行，直到末了的Promise实行完。
p.then(data => {
return new Promise((resolve,reject)=>{
//resolve传入的照样Promise
resolve(new Promise((resolve,reject)=>{
resolve(2);
}));
});
})此时就要运用递归操纵了。
范例中原文以下：
If a promise is resolved with a thenable that participates in a circular thenable chain, such that the recursive nature of [[Resolve]](promise, thenable) eventually causes [[Resolve]](promise, thenable) to be called again, following the above algorithm will lead to infinite recursion. Implementations are encouraged, but not required, to detect such recursion and reject promise with an informative TypeError as the reason.
很简单，把挪用resolve改写成递归实行resolvePromise要领即可，如许直到剖析Promise成一个一般值才会停止，即完成此范例：
//其他代码略...
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
//多是个对象或是函数
try {
let then = x.then;
if (typeof then === 'function') {
let y = then.call(x, (y) => {
//递归挪用，传入y如果Promise对象，继承轮回
resolvePromise(promise2, y, resolve, reject);
}, (r) => {
reject(r);
});
} else {
resolve(x);
}
} catch (e) {
reject(e);
}
} else {
//是个一般值，终究终了递归
resolve(x);
}
到此，链式挪用的代码已悉数终了。在响应的处所挪用resolvePromise要领即可。
末了的末了
实在，写到此处Promise的真正源码已写完了，然则间隔100分还差一分，是什么呢？
范例中申明，Promise的then要领是异步实行的。
onFulfilled or onRejected must not be called until the execution context stack contains only platform code.
ES6的原生Promise对象已完成了这一点，然则我们本身的代码是同步实行，不相信能够试一下，那末怎样将同步代码变成异步实行呢？能够运用setTimeout函数来模仿一下：
setTimeout(()=>{
//此处的代码会异步实行
},0);应用此技能，将代码then实行处的一切处所运用setTimeout变成异步即可，举个栗子：
setTimeout(() => {
try {
let x = onFulfilled(value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
},0);好了，如今已是满分的Promise源码了。
满分的测试
十分困难写好的Promise源码，终究是不是真的相符Promises/A+范例，开源社区供应了一个包用于测试我们的代码：promises-aplus-tests
这个包的运用要领不在详述，此包能够一项项的搜检我们写的代码是不是合规，假如有任一项不符就会给我们报出来，假如搜检你的代码一起都是绿色，那祝贺，你的Proimse已正当了，能够上线供应给他人运用了：
872项测试经过过程！
如今源码都邑写，终究能够自信的回复口试官的题目了。
