Promise主要作用：把异步操作变为简单可控，在完成异步操作后通过then可以做你想的操作。解决了地狱回调的痛点。
本篇实现了Promise的基本方法resolve、reject .then()、.then().then()链式调用。
一、Promise概念原理：
遵循Promise/A+规则：https://promisesaplus.com
它代表了一个异步操作的最终完成或者失败。只接受一个函数（内部叫executor自动执行），并且函数有两个参数：resolve（成功）、reject（失败）。
记住，只要声明了一个Promise即new Promise()，他就会立即执行！
执行时内部有三种状态，pending表示等待中、fulfilled表示成功、rejected表示失败。
它的结果是一个明确的状态：
- pending => fulfilled
- pending => rejected
听起来它的内部有点像薛定谔的猫
只要成功了，永远都是成功，失败了永远都是失败，状态已经改变就不能再改变。
二、基本使用：
1、一般我们使用它都需要与.then()方法一起食用，其中.then()也是接受两个可选的参数：fulfilled（promise成功时候的回调函数）、rejected（promise失败时候的回调函数）。如果传入then的参数不是一个函数，则会忽略它。
// promise.then语法
new Promise((resolve, reject) => {
reject(1); // 或是resolve(1)
}).then(res => {
console.log('fulfillment', res);
}, err => {
console.log('rejection', err);
});
// resolve表示成功，可以通过.then()方法获取到成功的结果
new Promise((resolve, reject) => {
resolve(1);
}).then(res => console.log(res)); // 1
// reject表示失败，使用.catch()方法获取到失败错误原因
new Promise((resolve, reject) => {
reject(2);
}).catch(err => console.log(err)); // 2
2、支持链式使用
new Promise((resolve, reject) => {
resolve(1);
}).then(res => res).then(res => console.log(res)); // 1
//如果不return一个结果，默认返回的是一个undefind
new Promise((resolve, reject) => {
resolve(1);
}).then(res => {}).then(res => console.log(res)); // undefind
三、实现环节
1、初步结构
按照上面我们已经知道Promise内部的一些内容，写一个方法架构出来。
它需要有：三种状态（pending、fulfilled、rejected）、默认值（成功/失败的默认返回值undefind）、默认方法（executor、resolve、reject 、then）先写上去。
class MyPromise {
/**
* 内部三种状态
* @type {string}
*/
static pending = 'pending';
static fulfilled = 'fulfilled';
static rejected = 'rejected';
constructor(executor) {
this.status = MyPromise.pending; //默认的状态是pending
this.susecessValue = undefined; // 成功默认返回是undefined
this.failedValue = undefined; // 失败默认返回是undefined
executor(this.resolve, this.reject); //自动执行
}
/**
* 成功的方法
* @param res
*/
resolve = (res) => {
};
/**
* 失败的方法
* @param err
*/
reject = (err) => {
};
/**
* 获取成功结果的then方法
* @param onResolved
* @param onRejected
*/
then = (onResolved, onRejected) => {
};
}
2、接着把resolve、reject 、then方法补充完整，很简单，只需要判断它的状态。resolve把状态改为fulfilled成功，同时把值存起来；reject 把状态改为rejected，同时把值存起来。then方法分别判断，是成功还是还是失败，去运行then((res)=>{})传进来的方法就可以。
class MyPromise {
static pending = 'pending';
static fulfilled = 'fulfilled';
static rejected = 'rejected';
constructor(executor) {
this.status = MyPromise.pending;
this.susecessValue = undefined;
this.failedValue = undefined;
executor(this.resolve, this.reject);
}
resolve = (res) => {
if (this.status === 'pending') {
this.susecessValue = res;
this.status = MyPromise.fulfilled; // 成功了直接切换状态，因为then()方法需要使用状态
}
};
reject = (err) => {
if (this.status === 'pending') {
this.failedValue = err;
this.status = MyPromise.rejected; // 失败了直接切换状态，因为then()方法需要使用状态
}
};
then = (onResolved, onRejected) => {
if (this.status === 'fulfilled' && onResolved) {
onResolved(this.susecessValue);
}
if (this.status === 'rejected' && onRejected) {
onRejected(this.failedValue);
}
};
}
到这里算是最基本的一个promise完成了，我们来运行看一下：
new MyPromise((resolve, reject) => {
resolve('成功1111');
}).then(res => {
console.log('fulfillment', res); // fulfillment 成功1111
}, err => {
console.log('rejection', err);
});
new MyPromise((resolve, reject) => {
reject('失败222');
}).then(res => {
console.log('fulfillment', res);
}, err => {
console.log('rejection', err); // rejection 失败222
});
通过运行是没有问题的，到这里我们算是完成了第一个小目标。
但是如果此时我们碰到了setTimeout就会有很大麻烦。比如resolve是写在setTimeout里的：
new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('测试');
}, 3000);
}).then(res => {
console.log('fulfillment', res);
}, err => {
console.log('rejection', err);
});
我们会发现该方法并不会运行，原因很简单，因为此时的resolve('测试')方法被延迟了3秒才执行，然而我们写的then是没有被延迟的，所以这时候，then()方法会先执行，但是因为我们的then内部写了this.status状态判断（此时resolve还没有把默认的状态status从pending改为fulfilled）所以它不执行内部的任何一个方法。
3、增加支持异步（重点难点）
我们可以把then(x = > x, y=> x)方法中的两个参数（都是函数）先存起来。等待resolve或者reject的时候再运行。
class MyPromise {
static pending = 'pending';
static fulfilled = 'fulfilled';
static rejected = 'rejected';
constructor(executor) {
this.onFulfilledFoo = []; // 存储成功的方法
this.onRejectedFoo = []; // 存储失败的方法
this.status = MyPromise.pending;
this.susecessValue = undefined;
this.failedValue = undefined;
executor(this.resolve, this.reject);
}
resolve = (res) => {
if (this.status === 'pending') {
this.susecessValue = res;
this.status = MyPromise.fulfilled;
// resolve 时运行我们存储过的对应onResolved方法,注意要把参数传递给fn
this.onFulfilledFoo.forEach(fn => fn(res));
}
};
reject = (err) => {
if (this.status === 'pending') {
this.failedValue = err;
this.status = MyPromise.rejected;
// 同理，reject时就去运行我们存储起来的对应onRejected方法,注意要把参数传递给fn
this.onRejectedFoo.forEach(fn => fn(err));
}
};
then = (onResolved, onRejected) => {
// 如果是pending状态，把成功的方法通过数组存起来
if (this.status === 'pending' && onResolved) {
this.onFulfilledFoo.push(onResolved);
}
// 如果是pending状态，把失败的方法通过数组存起来
if (this.status === 'pending' && onRejected) {
this.onRejectedFoo.push(onRejected);
}
if (this.status === 'fulfilled' && onResolved) {
onResolved(this.susecessValue);
}
if (this.status === 'rejected' && onRejected) {
onRejected(this.failedValue);
}
};
}
然后再来测试下我们刚才遇到的 setTimeout问题：
new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('测试');
}, 3000);
}).then(res => {
console.log('fulfillment', res); // 测试
}, err => {
console.log('rejection', err);
});
很完美，3秒后打印出‘测试’两个字，这就是我们要的结果。但是此时还有一个大问题，就是我们还不能支持链式调用。比如说以下这种情况：
function foo() {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('返回结果');
}, 3000);
});
}
foo().then(res => {
console.log('1', res);
return res;
}).then(res => res); //这里的then会报错：Cannot read properties of undefined (reading 'then')
我们想到是否可以直接在我们写的promise中then方法直接return一个this，是可以的。但是解决不了问题。因为遇到以下这个情况就凉凉了：
function foo() {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('测试');
}, 3000);
});
}
foo().then(res => {
return res + '1111';
}).then(res => console.log(res)); // 测试
// 正确结果应该是：测试1111
很显然这种结果不是我们想要的，因为我们的then执行完后没有把后续的then继续把方法放到promise里面执行（理解为现在的结果是在promise外部执行的）。所以我们需要在任何时候都返回一个promise，以供then链式调用。
4、增加支持链式调用（重点）
我们需要先改造一下刚刚的写法，1、then永远返回类实例本身（只有这样才可以为无限.then().then()调用）；如果是第一次调用then（即状态为pending，此时promise内部还没给出结果） 就把then方法用来做存储接收到的方法操作，即外部传进来来的方法都是用then存储。 否则就直接执行_handle方法（即异步完成了，后面的.then可以直接执行），2、resolve、reject负传递刚刚通过then存储的传进来的方法给_handle，3（重点）、_handle负责判断成功或者失败情况下该执行哪个对应的方法。并且多了一步把then传进来的方法里面添加计算好的返回值。
class MyPromise {
static pending = 'pending';
static fulfilled = 'fulfilled';
static rejected = 'rejected';
constructor(executor) {
this.saveFoo = []; // 只需要一个就可以存储
this.status = MyPromise.pending;
this.susecessValue = undefined;
this.failedValue = undefined;
executor(this.resolve, this.reject);
}
resolve = (res) => {
if (this.status === 'pending') {
this.susecessValue = res;
this.status = MyPromise.fulfilled;
// 此时调用我们的handle去触发外部传进来的方法
this.saveFoo.forEach(fn => this._handle(fn));
}
};
reject = (err) => {
if (this.status === 'pending') {
this.failedValue = err;
this.status = MyPromise.rejected;
this.saveFoo.forEach(fn => this._handle(fn)); //同理
}
};
/**
* 如果是pending状态（即第一次调用then，promise内部还没给出结果）
* 就把then方法用来做存储接收到的方法操作，即外部传进来来的方法都是用then存储
* 否则就直接执行_handle方法（即异步完成了，后面的.then可以直接执行）
* @param onResolved
* @param onRejected
*/
then = (onResolved, onRejected) => {
return new MyPromise((nextResolve, nexReject) => {
if (this.status === 'pending') {
this.saveFoo.push({onResolved, onRejected, nextResolve, nexReject});
} else {
this._handle({onResolved, onRejected, nextResolve, nexReject});
}
});
};
/**
* 负责执行成功或者失败后的方法
* @param callbacks
* @returns {MyPromise}
* @private
*/
_handle = (callbacks) => {
const { onResolved, onRejected, nextResolve, nexReject } = callbacks;
if (this.status === 'fulfilled' && onResolved) {
// 判断是否有方法，有的话和我们最开始的一样传入值，否则返回默认值
const thenValue = onResolved ? onResolved(this.susecessValue) : this.susecessValue;
// 把最开始得到的值继续传递给下一个then中传递进来的方法
nextResolve(thenValue);
}
// 同理
if (this.status === 'rejected' && onRejected) {
const thenErr = onRejected ? onRejected(this.failedValue) : this.failedValue;
nexReject(thenErr);
}
};
}
再次测试一下：
function foo() {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('测试');
}, 3000);
});
}
foo().then(res => {
console.log('结果：', res);
return res + '1111';
}).then(res => console.log('结果：', res));
// 结果： 测试
// 结果： 测试1111
到这里，我们算是解决了then示例调用的难题，还有一种情况，就是当我们的第二个then里面resolve的是一个Promise而不是一个值的时候，比如：
function foo() {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('测试');
}, 3000);
});
}
foo().then(res => {
return new MyPromise((resolve, reject) => { // 如果这里再返回一个promise，我们就需要判断
resolve('测试222');
});
}).then(res => console.log('结果：', res));
我们就需要对它判断一下，如果是一个promise实例就直接去resolve或者reject返回结果，于是代码里面加个promiseToThen方法判断是否是实例本身，是的话就去走then方法返回结果。
class MyPromise {
static pending = 'pending';
static fulfilled = 'fulfilled';
static rejected = 'rejected';
constructor(executor) {
this.saveFoo = []; // 只需要一个就可以存储
this.status = MyPromise.pending;
this.susecessValue = undefined;
this.failedValue = undefined;
executor(this.resolve, this.reject);
}
resolve = (res) => {
this.promiseToThen(res); // 判断是否是一个promise
if (this.status === 'pending') {
this.susecessValue = res;
this.status = MyPromise.fulfilled;
this.saveFoo.forEach(fn => this._handle(fn));
}
};
reject = (err) => {
this.promiseToThen(err); // 判断是否是一个promise
if (this.status === 'pending') {
this.failedValue = err;
this.status = MyPromise.rejected;
this.saveFoo.forEach(fn => this._handle(fn)); //同理
}
};
/**
* 如果是一个promise的本身实例就走then
* @param Params
*/
promiseToThen = (Params) => {
if (Params instanceof MyPromise) {
Params.then(this.resolve, this.reject);
}
};
/**
* 如果是pending状态（即第一次调用then，promise内部还没给出结果）
* 就把then方法用来做存储接收到的方法操作，即外部传进来来的方法都是用then存储
* 否则就直接执行_handle方法（即异步完成了，后面的.then可以直接执行）
* @param onResolved
* @param onRejected
*/
then = (onResolved, onRejected) => {
return new MyPromise((nextResolve, nexReject) => {
if (this.status === 'pending') {
this.saveFoo.push({onResolved, onRejected, nextResolve, nexReject});
} else {
this._handle({onResolved, onRejected, nextResolve, nexReject});
}
});
};
/**
* 负责执行成功或者失败后的方法
* @param callbacks
* @returns {MyPromise}
* @private
*/
_handle = (callbacks) => {
const { onResolved, onRejected, nextResolve, nexReject } = callbacks;
if (this.status === 'fulfilled' && onResolved) {
// 判断是否有方法，有的话和我们最开始的一样传入值，否则返回默认值
const thenValue = onResolved ? onResolved(this.susecessValue) : this.susecessValue;
// 把最开始得到的值继续传递给下一个then中传递进来的方法
nextResolve(thenValue);
}
// 同理
if (this.status === 'rejected' && onRejected) {
const thenErr = onRejected ? onRejected(this.failedValue) : this.failedValue;
nexReject(thenErr);
}
};
}
最后，我们还有一个步骤没做，就是promise规定，如果then的参数不是一个函数而是一个具体的值，我们就需要忽略并且返回对应的结果；如果then()参数为空那么这个then可以不执行，直接返回对应结果就可以。比如
.then(res=>'下一个then返回一个具体数值').then(1).then(res=>console.log(res))
// 或者是这种情况
.then(res=>'下一个then参数为空').then().then(res=>console.log(res))
我们只需要在_handle方法处加上判断即可，最终代码如下：
class MyPromise {
static pending = 'pending';
static fulfilled = 'fulfilled';
static rejected = 'rejected';
constructor(executor) {
this.saveFoo = []; // 只需要一个就可以存储
this.status = MyPromise.pending;
this.susecessValue = undefined;
this.failedValue = undefined;
try {
executor(this.resolve, this.reject);
} catch (e) {
this.reject(e)
}
}
resolve = (res) => {
this.promiseToThen(res); // 判断是否是一个promise
if (this.status === 'pending') {
this.susecessValue = res;
this.status = MyPromise.fulfilled;
this.saveFoo.forEach(fn => this._handle(fn));
}
};
reject = (err) => {
this.promiseToThen(err); // 判断是否是一个promise
if (this.status === 'pending') {
this.failedValue = err;
this.status = MyPromise.rejected;
this.saveFoo.forEach(fn => this._handle(fn)); //同理
}
};
/**
* 如果是一个promise的本身实例就走then
* @param Params
*/
promiseToThen = (Params) => {
if (Params instanceof MyPromise) {
Params.then(this.resolve, this.reject);
}
};
/**
* 把then方法用来做存储接收到的方法操作，即外部传进来来的方法都是用then存储
* @param onResolved
* @param onRejected
*/
then = (onResolved, onRejected) => {
return new MyPromise((nextResolve, nexReject) => {
if (this.status === 'pending') {
this.saveFoo.push({ onResolved, onRejected, nextResolve, nexReject });
}
this._handle({ onResolved, onRejected, nextResolve, nexReject });
});
};
_handle = (callbacks) => {
const {onResolved, onRejected, nextResolve, nexReject} = callbacks;
if (typeof onResolved === 'undefined') { // 直接执行下一个then方法中的函数
typeof nextResolve === 'function' && nextResolve(this.susecessValue)
}
/**
* 负责执行成功或者失败后的方法
* @param callbacks
* @returns {MyPromise}
* @private
*/
if (this.status === 'fulfilled' && onResolved) {
// 如果参数不是一个函数
const translateFun = typeof onResolved === 'function' ? onResolved : () => onResolved;
// 判断是否有方法，有的话和我们最开始的一样传入值，否则返回默认值
const thenValue = onResolved ? translateFun(this.susecessValue) : this.susecessValue;
// 把最开始得到的值继续传递给下一个then中传递进来的方法
nextResolve(thenValue);
}
// 同理
if (this.status === 'rejected' && onRejected) {
const translateFun = typeof onRejected === 'function' ? onRejected : () => onRejected;
const thenErr = onRejected ? translateFun(this.failedValue) : this.failedValue;
nexReject(thenErr);
}
};
}
最后：提示：任何手写的promise无法达到与原生的promise的运行顺序一致的效果（但是我们能保证then是在异步回调后出发，这其实是promise的一个重要点），因为原生的promise里.then方法会被归类到微任务那里，导致最终运行顺序不一致类似这种。
new Promise(resolve=>resolve(1)).then(res=>console.log(1))
console.log(2)
// 2 1
new MyPromise(resolve=>resolve(1)).then(res=>console.log(1))
console.log(2)
// 1 2