1.定义整体结构
// 自定义Promise函数模块
(function (window) {
/*
promise 构造函数
excutor 执行器函数(同步执行)
*/
function Promise(excutor) {
}
/*
Promise的原型对象then()
指定成功/失败的回调函数，返回一个新的promise对象
*/
Promise.prototype.then = function (onResolved, onRejectd) {
}
/*
Promise的原型对象catch()
指定失败的回调函数，返回一个新的promise对象
*/
Promise.prototype.catch = function (onRejectd) {
}
/*
Promise函数对象的resolve方法
返回一个指定结果的成功的promise
*/
Promise.resolve = function (value) {
}
/*
Promise函数对象的reject方法
返回一个指定reason的失败的promise
*/
Promise.reject = function (reason) {
}
/*
Promise函数对象的all方法
返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就失败
*/
Promise.all = function (promises) {
}
/*
Promise函数对象的race方法
返回一个promise，其结果由第一个完成的primise决定
*/
Promise.race = function (promises) {
}
// 向外暴露Promise函数
window.Promise = Promise;
})(window)
2.自定义promise构造器的实现
/*
promise 构造函数
excutor 执行器函数(同步执行)
*/
function Promise(excutor) {
const that = this
that.status = 'pending'; //给promise对象指定status属性，初始值为pending
that.data = undefined; //给promise对象指定一个用于存储结果数据的属性
that.callbacks = []; //每个元素的结构 :{onResolved(){},onRejected(){}}
function resolve(value) {
// 如果当前状态不是pending，直接结束
if (that.status != 'pending') {
return
}
// 将状态改为resolved
that.status = 'resolved';
// 保存value数据
that.data = value;
// 如果有待执行的callback函数，立即异步执行回调函数onResolved
if (that.callbacks.length > 0) {
setTimeout(() => { //模拟异步 放入队列中执行所有成功的回调
that.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
});
})
}
}
function reject(reason) {
// 如果当前状态不是pending，直接结束
if (that.status != 'pending') {
return
}
// 将状态改为rejected
that.status = 'rejected';
// 保存value数据
that.data = reason;
// 如果有待执行的callback函数，立即异步执行回调函数onResolved
if (that.callbacks.length > 0) {
setTimeout(() => { //模拟异步 放入队列中执行所有成功的回调
that.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
});
})
}
}
// 立即执行excutor
try{
excutor(resolve,reject)
}catch(error){//如果执行器抛出异常，promise对象变为rejected状态
reject(error)
}
}
3.promise.then方法的实现
/*
Promise的原型对象then()
指定成功/失败的回调函数，返回一个新的promise对象
*/
Promise.prototype.then = function (onResolved, onRejected) {
// 向后传递成功的value
onResolved = typeof onResolved === 'function' ? onResolved : value =>value
// 指定默认的失败的回调(实现错误/异常穿透的关键点) 向后传递失败的reason
onRejected = typeof onRejected === 'function' ? onRejected : reason =>{throw reason}
const that = this;
//返回一个新的promise对象
return new Promise((resolve, reject) => {
// 调用指定的回调函数处理，根据执行的结果改变return的promise状态
function hanle(callback) {
/*
1.如果抛出异常，return的promise就会失败，reason就是error
2.如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
*/
try {
const result = callback(that.data)
if (result instanceof Promise) {
// 3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
result.then(
value => resolve(value), // 当result成功时，让return的promise也成功
reason => reject(reason) // 当result失败时，让return的promise也失败
)
// 简单最优化的写法
// result.then(resolve,reject)
} else {
// 2.如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
resolve(result)
}
} catch (error) {
// 1.如果抛出异常，return的promise就会失败，reason就是error
reject(error)
}
}
// 当前状态是pending状态，讲回调函数保存起来
if (that.status === PENDING) {
// 假设当前状态是PENDING状态，将回调函数保存起来
this.callbacks.push({
onResolved(value) {
hanle(onResolved)
},
onRejected(reason) {
hanle(onRejected)
}
})
} else if (that.status === RESOLVED) {
// 如果当前是resolved状态，异步执行resolved并改变return的promise状态
setTimeout(() => {
hanle(onResolved)
})
} else { //如果当前是rejected状态，异步执行rejected并改变return的promise状态
setTimeout(() => {
hanle(onRejected)
})
}
})
}
4.promise.catch方法的 实现
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected)
}
4.promise.resolve方法的 实现
/*
Promise函数对象的resolve方法
返回一个指定结果的成功的promise
*/
Promise.resolve = function (value) {
// 返回一个成功/失败的promise
return new Promise((resolve,reject)=>{
// value是promise
if(value instanceof Promise){//使用value的结果作为promise的结果
value.then(resolve,reject)
}else{//value不是promise => promise变为成功 数据是value
resolve(value)
}
})
}
4.promise.reject方法的 实现
/*
Promise函数对象的reject方法
返回一个指定reason的失败的promise
*/
Promise.reject = function (reason) {
// 返回一个失败的promise
return new Promise((resolve,reject)=>{
reject(reason)
})
}
5.promise.all方法的 实现
/*
Promise函数对象的all方法
返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就失败
*/
Promise.all = function (promises) {
// 用来保存所有成功的value的数据
let values = new Array(promises.length)
// 用来保存成功promise的数量
let resolvedCount = 0;
return new Promise((resolve, reject) => {
// 遍历promises获取promise的值
promises.forEach((p, index) => {
Promise.resolve(p).then(
value => {
resolvedCount++
// p成功，将成功的value保存values
values[index] = value;
// 如果全部成功了，将return的promise变为成功
if (resolvedCount === promises.length) {
resolve(values);
}
},
reason => { //只要一个失败了，return的promise就失败
reject(reason)
}
)
})
})
}
6.promise.race方法的 实现
/*
Promise函数对象的race方法
返回一个promise，其结果由第一个完成的primise决定
*/
Promise.race = function (promises) {
// 返回一个promise
return new Promise((resolve, reject) => {
promises.forEach((p,index)=>{
Promise.resolve(p).then(
value=>{//一旦成功了，将return变为成功
resolve(value)
},
reason=>{ //一旦失败了，将return变为失败
reject(reason)
}
)
})
})
}
完整的promise.js代码
// 自定义Promise函数模块
(function (window) {
const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
/*
promise 构造函数
excutor 执行器函数(同步执行)
*/
function Promise(excutor) {
const that = this
that.status = PENDING; //给promise对象指定status属性，初始值为PENDING
that.data = undefined; //给promise对象指定一个用于存储结果数据的属性
that.callbacks = []; //每个元素的结构 :{onResolved(){},onRejected(){}}
function resolve(value) {
// 如果当前状态不是PENDING，直接结束
if (that.status != PENDING) {
return
}
// 将状态改为resolved
that.status = RESOLVED;
// 保存value数据
that.data = value;
// 如果有待执行的callback函数，立即异步执行回调函数onResolved
if (that.callbacks.length > 0) {
setTimeout(() => { //模拟异步 放入队列中执行所有成功的回调
that.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
});
})
}
}
function reject(reason) {
// 如果当前状态不是PENDING，直接结束
if (that.status != PENDING) {
return
}
// 将状态改为rejected
that.status = REJECTED;
// 保存value数据
that.data = reason;
// 如果有待执行的callback函数，立即异步执行回调函数onResolved
if (that.callbacks.length > 0) {
setTimeout(() => { //模拟异步 放入队列中执行所有成功的回调
that.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
});
})
}
}
// 立即执行excutor
try {
excutor(resolve, reject)
} catch (error) { //如果执行器抛出异常，promise对象变为rejected状态
reject(error)
}
}
/*
Promise的原型对象then()
指定成功/失败的回调函数，返回一个新的promise对象
*/
Promise.prototype.then = function (onResolved, onRejected) {
// 向后传递成功的value
onResolved = typeof onResolved === 'function' ? onResolved : value => value
// 指定默认的失败的回调(实现错误/异常穿透的关键点) 向后传递失败的reason
onRejected = typeof onRejected === 'function' ? onRejected : reason => {
throw reason
}
const that = this;
//返回一个新的promise对象
return new Promise((resolve, reject) => {
// 调用指定的回调函数处理，根据执行的结果改变return的promise状态
function hanle(callback) {
/*
1.如果抛出异常，return的promise就会失败，reason就是error
2.如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
*/
try {
const result = callback(that.data)
if (result instanceof Promise) {
// 3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
result.then(
value => resolve(value), // 当result成功时，让return的promise也成功
reason => reject(reason) // 当result失败时，让return的promise也失败
)
// 简单最优化的写法
// result.then(resolve,reject)
} else {
// 2.如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
resolve(result)
}
} catch (error) {
// 1.如果抛出异常，return的promise就会失败，reason就是error
reject(error)
}
}
// 当前状态是pending状态，讲回调函数保存起来
if (that.status === PENDING) {
// 假设当前状态是PENDING状态，将回调函数保存起来
this.callbacks.push({
onResolved(value) {
hanle(onResolved)
},
onRejected(reason) {
hanle(onRejected)
}
})
} else if (that.status === RESOLVED) {
// 如果当前是resolved状态，异步执行resolved并改变return的promise状态
setTimeout(() => {
hanle(onResolved)
})
} else { //如果当前是rejected状态，异步执行rejected并改变return的promise状态
setTimeout(() => {
hanle(onRejected)
})
}
})
}
// Promise.prototype.then = function (onResolved, onRejected) {
// // 向后传递成功的value
// onResolved = typeof onResolved === 'function' ? onResolved : value => value
// // 指定默认的失败的回调(实现错误/异常穿透的关键点) 向后传递失败的reason
// onRejected = typeof onRejected === 'function' ? onRejected : reason => {
// throw reason
// }
// const that = this;
// // 返回一个新的promise
// return new Promise((resolve, reject) => {
// /*
// 执行指定的回调函数
// 根据执行的结果改变return的promise的状态/数据
// */
// function handle(callback) {
// /*
// 返回的promise结果由onResolved和onRejected执行结果决定
// 1.抛出异常，返回的promise结果为失败，reason为异常
// 2.返回promise，返回promise结果就是这个结果
// 3.返回的不是promise，返回promise为成功，value就是返回值
// */
// try {
// const result = callback(that.data)
// if (result instanceof Promise) { //2.返回promise，返回promise结果就是这个结果
// result.then(resolve, reject)
// } else { //3.返回的不是promise，返回promise为成功，value就是返回值
// resolve(result)
// }
// } catch (error) { // 1.抛出异常，返回的promise结果为失败，reason为异常
// reject(error)
// }
// }
// // 当前promise的状态是resolved
// if (that.status === RESOLVED) {
// setTimeout(() => {
// handle(onResolved)
// })
// } else if (that.status === REJECTED) {
// // 当前promise的状态是rejected
// handle(onRejected)
// } else {
// //将成功和失败的回调保存callbacks容器中缓存起来。
// that.callbacks.push({
// onResolved() {
// handle(onResolved)
// },
// onRejected() {
// handle(onRejected)
// }
// })
// }
// })
// }
/*
Promise的原型对象catch()
指定失败的回调函数，返回一个新的promise对象
*/
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected)
}
/*
Promise函数对象的resolve方法
返回一个指定结果的成功的promise
*/
Promise.resolve = function (value) {
// 返回一个成功/失败的promise
return new Promise((resolve, reject) => {
// value是promise
if (value instanceof Promise) { //使用value的结果作为promise的结果
value.then(resolve, reject)
} else { //value不是promise => promise变为成功 数据是value
resolve(value)
}
})
}
/*
Promise函数对象的reject方法
返回一个指定reason的失败的promise
*/
Promise.reject = function (reason) {
// 返回一个失败的promise
return new Promise((resolve, reject) => {
reject(reason)
})
}
/*
Promise函数对象的all方法
返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就失败
*/
Promise.all = function (promises) {
// 用来保存所有成功的value的数据
let values = new Array(promises.length)
// 用来保存成功promise的数量
let resolvedCount = 0;
return new Promise((resolve, reject) => {
// 遍历promises获取promise的值
promises.forEach((p, index) => {
Promise.resolve(p).then(
value => {
resolvedCount++
// p成功，将成功的value保存values
values[index] = value;
// 如果全部成功了，将return的promise变为成功
if (resolvedCount === promises.length) {
resolve(values);
}
},
reason => { //只要一个失败了，return的promise就失败
reject(reason)
}
)
})
})
}
/*
Promise函数对象的race方法
返回一个promise，其结果由第一个完成的primise决定
*/
Promise.race = function (promises) {
// 返回一个promise
return new Promise((resolve, reject) => {
promises.forEach((p,index)=>{
Promise.resolve(p).then(
value=>{//一旦成功了，将return变为成功
resolve(value)
},
reason=>{ //一旦失败了，将return变为失败
reject(reason)
}
)
})
})
}
// 向外暴露Promise函数
window.Promise = Promise;
})(window)
Promise.resolveDelay方法的实现
/*
返回一个promise对象，它在指定的时间后才确定结果
*/
Promise.resolveDelay = function (value, time) {
setTimeout(() => {
if (value instanceof Promise) { //使用value的结果作为promise的结果
value.then(resolve, reject)
} else { //value不是promise => promise变为成功 数据是value
resolve(value)
}
}, time)
}
Promise.rejectDelay方法的实现
/*
返回一个promise对象，它在指定的时间后才确定失败
*/
Promise.rejectDelay = function (value, time) {
setTimeout(()=>{
reject(reason)
})
}
自定义promise用class类版本 完整代码
// 自定义Promise函数模块
(function (window) {
const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
/*
promise 构造函数
excutor 执行器函数(同步执行)
*/
class Promise {
constructor(excutor) {
const that = this
that.status = PENDING; //给promise对象指定status属性，初始值为PENDING
that.data = undefined; //给promise对象指定一个用于存储结果数据的属性
that.callbacks = []; //每个元素的结构 :{onResolved(){},onRejected(){}}
function resolve(value) {
// 如果当前状态不是PENDING，直接结束
if (that.status != PENDING) {
return
}
// 将状态改为resolved
that.status = RESOLVED;
// 保存value数据
that.data = value;
// 如果有待执行的callback函数，立即异步执行回调函数onResolved
if (that.callbacks.length > 0) {
setTimeout(() => { //模拟异步 放入队列中执行所有成功的回调
that.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
});
})
}
}
function reject(reason) {
// 如果当前状态不是PENDING，直接结束
if (that.status != PENDING) {
return
}
// 将状态改为rejected
that.status = REJECTED;
// 保存value数据
that.data = reason;
// 如果有待执行的callback函数，立即异步执行回调函数onResolved
if (that.callbacks.length > 0) {
setTimeout(() => { //模拟异步 放入队列中执行所有成功的回调
that.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
});
})
}
}
// 立即执行excutor
try {
excutor(resolve, reject)
} catch (error) { //如果执行器抛出异常，promise对象变为rejected状态
reject(error)
}
}
/*
Promise的原型对象then()
指定成功/失败的回调函数，返回一个新的promise对象
*/
then(onResolved, onRejected) {
// 向后传递成功的value
onResolved = typeof onResolved === 'function' ? onResolved : value => value
// 指定默认的失败的回调(实现错误/异常穿透的关键点) 向后传递失败的reason
onRejected = typeof onRejected === 'function' ? onRejected : reason => {
throw reason
}
const that = this;
//返回一个新的promise对象
return new Promise((resolve, reject) => {
// 调用指定的回调函数处理，根据执行的结果改变return的promise状态
function hanle(callback) {
/*
1.如果抛出异常，return的promise就会失败，reason就是error
2.如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
*/
try {
const result = callback(that.data)
if (result instanceof Promise) {
// 3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
result.then(
value => resolve(value), // 当result成功时，让return的promise也成功
reason => reject(reason) // 当result失败时，让return的promise也失败
)
// 简单最优化的写法
// result.then(resolve,reject)
} else {
// 2.如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
resolve(result)
}
} catch (error) {
// 1.如果抛出异常，return的promise就会失败，reason就是error
reject(error)
}
}
// 当前状态是pending状态，讲回调函数保存起来
if (that.status === PENDING) {
// 假设当前状态是PENDING状态，将回调函数保存起来
this.callbacks.push({
onResolved(value) {
hanle(onResolved)
},
onRejected(reason) {
hanle(onRejected)
}
})
} else if (that.status === RESOLVED) {
// 如果当前是resolved状态，异步执行resolved并改变return的promise状态
setTimeout(() => {
hanle(onResolved)
})
} else { //如果当前是rejected状态，异步执行rejected并改变return的promise状态
setTimeout(() => {
hanle(onRejected)
})
}
})
}
/*
Promise的原型对象catch()
指定失败的回调函数，返回一个新的promise对象
*/
catch (onRejected) {
return this.then(undefined, onRejected)
}
/*
Promise函数对象的resolve方法
返回一个指定结果的成功的promise
*/
static resolve = function (value) {
// 返回一个成功/失败的promise
return new Promise((resolve, reject) => {
// value是promise
if (value instanceof Promise) { //使用value的结果作为promise的结果
value.then(resolve, reject)
} else { //value不是promise => promise变为成功 数据是value
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) {
// 用来保存所有成功的value的数据
let values = new Array(promises.length)
// 用来保存成功promise的数量
let resolvedCount = 0;
return new Promise((resolve, reject) => {
// 遍历promises获取promise的值
promises.forEach((p, index) => {
Promise.resolve(p).then(
value => {
resolvedCount++
// p成功，将成功的value保存values
values[index] = value;
// 如果全部成功了，将return的promise变为成功
if (resolvedCount === promises.length) {
resolve(values);
}
},
reason => { //只要一个失败了，return的promise就失败
reject(reason)
}
)
})
})
}
/*
Promise函数对象的race方法
返回一个promise，其结果由第一个完成的primise决定
*/
static race = function (promises) {
// 返回一个promise
return new Promise((resolve, reject) => {
promises.forEach((p, index) => {
Promise.resolve(p).then(
value => { //一旦成功了，将return变为成功
resolve(value)
},
reason => { //一旦失败了，将return变为失败
reject(reason)
}
)
})
})
}
/*
返回一个promise对象，它在指定的时间后才确定结果
*/
static resolveDelay = function (value, time) {
setTimeout(() => {
if (value instanceof Promise) { //使用value的结果作为promise的结果
value.then(resolve, reject)
} else { //value不是promise => promise变为成功 数据是value
resolve(value)
}
}, time)
}
/*
返回一个promise对象，它在指定的时间后才确定失败
*/
static rejectDelay = function (reason, time) {
setTimeout(() => {
reject(reason)
})
}
}
// 向外暴露Promise函数
window.Promise = Promise;
})(window)