深入理解Promise
最近把Promise重新学了一下，对Promise有了更深层次的理解，话不多说，可以看下代码
/*自定义promise函数模块 */
(function (window) {
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
class Promise{
/*
Promise构造函数
excutor 执行器函数
*/
constructor(excutor) {
//将当前Promise对象保存起来
const self = this//代表Promis对象
self.status = PENDING //给promise对象指定status属性，初始值为pending
self.data = undefined //给promise指定一个用于存储结果数据的属性
self.callbacks = [] //每个元素的结构:{onResolved(){},onRejected(){}}0
function resolve(value) {
//如果当前状态不为pending，直接结束
if (self.status !== PENDING) {
return
}
//将状态改为resollved
self.status = RESOLVED
//保存value数据
self.data = value
//如果有待执行的callback函数，立即执行异步回掉函数
if (self.callbacks.length > 0) {
setTimeout(() => { //放入队列中执行所有成功的回调
self.callbacks.forEach(callbackObj => {
callbackObj.onResolved(value)
})
});
}
}
function reject(reason) {
//如果当前状态不为pending，直接结束
if (self.status !== PENDING) {
return
}
//将状态改为rejected
self.status = REJECTED
//保存value数据
self.data = reason
//如果有待执行的callback函数，立即执行异步回掉函数
if (self.callbacks.length > 0) {
setTimeout(() => { //放入队列中执行所有成功的回调
self.callbacks.forEach(callbackObj => {
callbackObj.onRejected(reason)
})
})
}
}
//立即同步执行excutor
try {
excutor(resolve, reject)
} catch (error) { //如果执行器抛出异常，promise对象变为reject状态
reject(error)
}
}
/*
Promise原型对象then方法
指定成功和失败的回调函数
函数返回一个新的promise对象
返回的结果由onResolved/ onRejected执行的结果决定
*/
then (onResolved, onRejected) {
onResolved = typeof onResolved === 'function' ? onResolved : value => value //向后传递成功的value
//指定默认失败的回调（发现错误/异常穿透的关键点）
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }//向后传递失败的reason
const self = this
//返回一个新的promise对象
return new Promise((resolve, reject) => {
// 调用指定回调函数，根据执行结果，改变return的promise的状态
function handle(callback) {
try {
const result = callback(self.data)
//3.如果回调函数返回promise。return的promise就是这个promise的结果
if (result instanceof Promise) {
result.then(
value => resolve(value), //当result成功时，让返回的prommise也成功
reason => reject(reason) //当result失败时，让返回的prommise也失败
)
// result.then(resolve,reject)
} else {
//如果回调函数不是peomise，return的promise就会成功。value就是返回的值
resolve(result)
}
} catch (error) {
//如果抛出异常，result的promise就会失败，reason就是error
reject(error)
}
}
//当前状态是pending，将回调函数保存起来
if (self.status === PENDING) {
self.callbacks.push({
onResolved(value) {
handle(onResolved)
},
onRejected(reason) {
handle(onRejected)
}
})
} else if (self.status === RESOLVED) {
setTimeout(() => {
handle(onResolved)
})
} else {//rejected
setTimeout(() => {
handle(onRejected)
})
}
})
}
/*
Promise原型对象catch方法
指定失败的回调函数
函数返回一个新的promise对象
*/
catch (onRejected) {
return this.then(undefined, onRejected)
}
/*
Promise函数对象的方法 resolve
返回一个指定结果的成功的promise
*/
static resolve = function (value) {
//返回一个成功/失败的promise
return new Promise((resolve, reject) => {
if (value instanceof Promise) { //value是promise
value.then(resolve, reject)
} else { //value不是promise
resolve(value)
}
})
}
/*
Promise函数对象的方法 reject
返回一个指定reason的失败的promise
*/
static reject = function (reason) {
//返回一个失败的promise
return new Promise((resolve, reject) => {
reject(reason)
})
}
/*
Promise函数对象的方法 all
返回一个Promise，只有所有promise都成功才成功，否则失败
*/
static all = function (promises) {
const values = new Array(promises.length) //用来保存所有成功value的数组
let resolveCount = 0 //用来保存成功promise的数量
return new Promise((resolve, reject) => {
//遍历promise获取每个promise的结果
promises.forEach((p, index) => {
Promise.resolve(p).then(
value => { //p成功，将成功的value保存到values
resolveCount++ //成功的数量+1
values[index] = value
//如果全部成功，将return的promise改变成功
if (resolveCount === promises.length) {
resolve(values)
}
},
reason => {
reject(reason)
}
)
})
})
}
/*
Promise函数对象的方法 race
返回一个promise，其结果由第一个promise执行的结果决定
只有第一次调用的才有效果
*/
static race = function (promises) {
//返回一个promise
return new Promise((resolve, reject) => {
//遍历promise获取每个promise的结果
promises.forEach((p, index) => {
Promise.resolve(p).then(
value => { //一旦成功了，将return变为成功
resolve(value)
},
reason => {//一旦失败了，将return变为失败
reject(reason)
}
)
})
})
}
/*
返回一个Promise对象，在指定的时间后才产生结果
*/
static resolveDelay = function (value, time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value instanceof Promise) {
value.then(resolve, reject)
} else {
resolve(value)
}
}, time)
})
}
/*
返回一个Promise对象，在指定的时间后才失败
*/
static rejectDelay = function (reason, time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(reason)
}, time)
})
}
}
/*向外暴露Promise函数 */
window.Promise = Promise;