1.了解Promise
众所周知，Promise是JS中异步编程的一种解决方案。
在模拟实现Promise之前，首先需要了解Promise的特性。
1.一个promise(Promise的实例)，有三种状态，初始时的等待态pending，成功时的成功态resolved以及失败态rejected。promise的状态只能被改变一次，只能从pending成为resolved或者rejected，改变不可逆。
2.promise改变状态的方式有三种，当调用resolve时，由pending变为resolved，当调用reject，或者执行器函数内部抛出异常时，由pending变为rejected。
3.对同一个promise指定了多个回调函数时，当promise变为对应状态时，对应的回调函数全部都会执行。
4.p.then() 返回的Promise的结果状态怎么确定？
由then指定的回调函数的结果决定
①如果抛出异常，新的promise变成rejected
②如果回调函数返回的是不是Promise的任意值string，undefined等等，新的promise变为fulfilled，数据是返回的值
③如果回调函数返回的是一个promise对象。返回值promise对象的结果和状态就是新的promise的结果和状态
5.promise异常穿透：在之前的then中只写了一个成功的回调，没有写失败的回调 相当于隐式的写了 err=>{throw err} 所以会穿透
①当使用promise的then链式调用时，可以在最后指定失败的回调
②前面的任何操作出现了异常都会传到最后的失败的回调函数中处理
6.中断promise链：当使用promise链式调用时，在中间中断，不再调用后面的回调函数
方法：在需要中断处 返回一个pending状态的promise return new Promise(()={})
2.Promise的模拟实现
实现Promise中的then、catch、all、race、resolve、reject方法。
使用的时ES6语法。
1.MyPromise整体结构
class MyPromise {
//构造函数 参数是执行器函数
constructor(executor) {
}
//指定成功和失败的回调函数，返回一个新的promise
then(resolvedCallBack, rejectedCallBack = error => { throw error }) {
}
//返回一个新的promise
catch(rejectedCallBack) {
}
/**
* @author: forceddd
* @desc: 要判断传入的数组是否全部是promise对象
* @param ArrayOfPromises
* @return: 返回最先完成的promise任务结果和状态 无论成功或者失败
*/
static race(promises) {
}
/**
* @author: forceddd
* @desc: 当所有promise都成功时，返回一个成功态的promise 数据是所有promise成功数据组成的数组 否则返回一个失败态的promise
* @param ArrayOfPromises
* @return: promise
*/
static all(promises) {
}
/**
* @author: forceddd
* @desc: 传入非promise 返回一个成功态的promise data是该参数
* 传入promise 返回值的状态和结果由参数promise的状态和结果决定
* @param any
* @return: 返回一个指定结果的promise
*/
static resolve(data) {
}
/**
* @author: forceddd
* @desc: 不考虑传入promise
* @param reason
* @return: 返回一个失败状态的promise 失败原因是传入的参数
*/
static reject(error) {
}
}2.构造器的实现
//构造函数 参数是执行器函数(执行器函数是同步执行的)
constructor(executor) {
this.status = 'pending';//当前实例的状态
this.data = undefined;//用于存储完成后的数据
this.callBacks = [];//用于存储promise完成之前，即状态仍为pending时，便指定的回调函数 [{resolveCb,rejectCb}]
//箭头函数让this指向构造函数中的this 即实例 否则resolve和reject中的this会指向window
//声明两个用于改变promise状态的函数，并且要作为参数传入执行器函数executor中
const resolve = data => {
//status只能被修改一次 判断当前是否是初始值pending
if (this.status !== 'pending') return;
//改变promise状态为成功态
this.status = 'resolved';
//存储成功值
this.data = data;
//如果此时有的回调函数已经被指定了 应当立即--异步地--执行这些回调函数
//通过setTimeout将成功地回调函数放入异步队列
if (this.callBacks.length) {
setTimeout(() => {
this.callBacks.forEach(cbObj => cbObj.resolvedCallBack(data))
})
}
}
const reject = error => {
//status只能被修改一次 判断当前是否是初始值pending
if (this.status !== 'pending') return;
//改变promise状态为失败态
this.status = 'rejected';
//存储失败信息
this.data = error;
//如果此时有的回调函数已经被指定了 应当立即--异步--执行这些回调函数
//通过setTimeout将失败地回调函数放入异步队列
if (this.callBacks.length) {
setTimeout(() => {
this.callBacks.forEach(cbObj => cbObj.rejectedCallBack(error))
})
}
}
// 同步执行executor try catch用于捕获executor抛出的异常
try {
executor(resolve, reject)
} catch (error) {
//如果抛出了异常，promise要变为rejected
reject(error)
}
}3.then的实现
//指定成功和失败的回调函数，返回一个新的promise
//给rejectedCallBack默认值 实现异常穿透处理 即不传入rejectedCallBack，
//但又是失败态时，会执行默认函数，抛出异常，将then返回值promise转为失败态
then(resolvedCallBack, rejectedCallBack = error => { throw error }) {
//因为在catch中 resolvedCallBack我会传入一个null 所以此处增加一个判断条件
resolvedCallBack = typeof resolvedCallBack === 'function' ? resolvedCallBack : _ => _;
//then的返回值是一个promise
return new MyPromise((resolve, reject) => {
/**
* @desc: 处理then的返回值
* 1.如果执行回调函数时抛出了异常 返回一个失败的promise error是异常信息
2.如果回调函数返回值不是promise对象 ，返回一个成功的promise data是回调函数返回值
3.如果回调函数的返回值是一个promise 这个promise的状态和结果作为返回值promise的状态和结果
* @param: cb
* @return:
*/
const handleReturn = cb => {
let res;//接收成功或者失败的回调函数的返回值
try {
res = cb(this.data);
res instanceof MyPromise
//3.如果回调函数的返回值是一个promise 这个promise的状态和结果作为返回值promise的状态和结果
? res.then(
data => resolve(data),
error => reject(error)
)
//简写形式 成功时 将resolve作为回调函数resolvedCallBack传入 内部会执行 resolvedCallBack(this.data),
//和传入一个data => resolve(data)效果相同
// res.then(resolve, reject)
//2.如果回调函数返回值不是promise对象 ，返回一个成功的promise data是回调函数返回值
: resolve(res)
} catch (error) {
//1.如果执行回调函数时抛出了异常 返回一个失败的promise error是异常信息
reject(error)
}
}
if (this.status === 'pending') {
//此时实例仍然时pending态 回调函数已经被声明了 将指定的回调函数存储到callBacks中
//此时同样要根据回调函数返回值来判断then的返回值 所以不能直接像下面一样存储回调函数，需要外包一层函数，以便对返回值进行判断
// this.callBacks.push({ resolvedCallBack, rejectedCallBack })
this.callBacks.push({
resolvedCallBack: _ => handleReturn(resolvedCallBack),
rejectedCallBack: _ => handleReturn(rejectedCallBack)
})
/* 在状态改变之后 指定的回调函数 会立即--异步--执行 */
} else if (this.status === 'resolved') {
setTimeout(() => handleReturn(resolvedCallBack));
} else {
setTimeout(() => handleReturn(rejectedCallBack));
}
})
}4.catch的实现
//返回一个新的promise catch是then的一个语法糖
catch(rejectedCallBack) {
return this.then(null, rejectedCallBack)
}5.resolve和reject的实现
/**
* @author: forceddd
* @desc: 传入非promise 返回一个成功态的promise data是该参数
* 传入promise 返回值的状态和结果由参数promise的状态和结果决定
* @param any
* @return: 返回一个指定结果的promise
*/
static resolve(data) {
return new MyPromise((resolve, reject) => {
data instanceof MyPromise
?
/*res.then(
data => resolve(data),
error => reject(error)
)
的简写 */
data.then(resolve, reject)
: resolve(data)
})
}
/**
* @author: forceddd
* @desc: 不考虑传入promise
* @param reason
* @return: 返回一个失败状态的promise 失败原因是传入的参数
*/
static reject(error) {
return new MyPromise((_, reject) => reject(error))
}6.race的实现
/**
* @author: forceddd
* @desc: 要判断传入的数组是否全部是promise对象
* @param ArrayOfPromises
* @return: 返回最先完成的promise任务结果 无论成功或者失败
*/
static race(promises) {
//返回一个promise
return new MyPromise((resolve, reject) => {
promises.forEach(promise => {
//判断元素是不是promise 如果不是，通过resolve函数转换成promise
promise = promise instanceof MyPromise ? promise : MyPromise.resolve(promise);
//将最先完成的promise状态和结果 作为race返回值的状态和结果
promise.then(resolve, reject)
})
})
}7.all的实现
/**
* @author: forceddd
* @desc: 当所有promise都成功时，返回一个成功态的promise 数据是所有promise成功数据组成的数组 否则返回一个失败态的promise
* @param ArrayOfPromises
* @return: promise
*/
static all(promises) {
let resolveCount = 0;//记录执行then中成功回调函数的次数 每执行一次then的回调函数说明有个一个promise已经有了结果
const results = new Array(promises.length)//创建一个长度和promises相同的数组，用来存储成功的data
return new MyPromise((resolve, reject) => {
promises.forEach((promise, index) => {
//将不是promise的元素转换成promise
promise = promise instanceof MyPromise ? promise : MyPromise.resolve(promise);
promise.then(
data => {
results[index] = data;
resolveCount++
resolveCount === promises.length ? resolve(results) : null
},
error => reject(error) //将all的返回值变为reject状态
)
})
})
}