Promise基础_自定义 - 手写Promise
1. 整体结构框架
/**
* 自定义Promise函数模块：IIFE
*/
(function (window) {
const PENDING = 'pending'
const RESOLVED = 'fulfilled'
const REJECTED = 'rejected'
/**
* Promise构造函数
* @param {function} executor 执行器函数（同步执行）(resolve, reject) => {}
*/
function Promise(executor) {
}
/**
* Promise原型对象then方法
* 指定成功和失败的回调函数
* @param {function} onResolved 成功的回调函数(value) => {}
* @param {function} onRejected 失败的回调函数(reason) => {}
* @returns 一个新的promise对象结果由onResolved/onRejected执行的结果决定
*/
Promise.prototype.then = function (onResolved, onRejected) {
}
/**
* Promise原型对象catch方法
* 指定失败的回调函数
* @param {function} onRejected 失败的回调函数(reason) => {}
* @returns 一个新的promise对象
*/
Promise.prototype.catch = function (onRejected) {
}
/**
* Promise函数对象resolve方法
* @param {*} value 成功的值
* @returns 一个成功/失败的promise
*/
Promise.resolve = function (value) {
}
/**
* Promise函数对象reject方法
* @param {*} resaon 失败的原因
* @returns 一个失败的promise
*/
Promise.reject = function (resaon) {
}
/**
* Promise函数对象all方法
* @param {Array<Promise>} promises
* @returns 一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就失败
*/
Promise.all = function (promises) {
}
/**
*Promise函数对象race方法
* @param {Array<Promise>} promises
* @returns 返回 一个promise，其结果由第一个完成的promise决定
*/
Promise.race = function (promises) {
}
// 向外暴露Promise函数
window.Promise = Promise
})(window)
2. Promise(executor)
- Promise构造函数
- executor: 执行器函数（同步执行）
/**
* Promise构造函数
* @param {*} executor 执行器函数（同步执行）(resolve, reject) => {}
*/
function Promise(executor) {
const self = this; // 保存当前实例对象的this的值
// 添加属性
self.PromiseState = PENDING // 给promise对象指定status属性，初始值为pending
self.PromiseResult = null // 给promise对象指定一个用于存储结果数据的属性
self.callbacks = [] // 存的是对象 每个元素的结构：{onResolved() {}, onRejected() {}}
/**
* executor内部定义成功时调用的函数
* @param {*} value 成功的值
* @returns
*/
function resolve(value) {
// 如果当前状态不是pending，直接结束
if (self.PromiseState !== PENDING) return
// 1. 修改对象的状态（promiseState）为 fulfilled
self.PromiseState = RESOLVED
// 2. 设置对象结果值（promiseResult）为 value
self.PromiseResult = value
// 如果有待执行的callback函数，立即【异步】执行回调函数onResolved
if (self.callbacks.length > 0) {
setTimeout(() => { // 放入队列中执行所有成功的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
})
}, 0)
}
}
/**
* executor内部定义失败时调用的函数
* @param {*} reason 失败的原因
* @returns
*/
function reject(reason) {
// 如果当前状态不是pending，直接结束
if (self.PromiseState !== PENDING) return
// 1. 修改对象的状态（promiseState）为 rejected
self.PromiseState = REJECTED
// 2. 设置对象结果值（promiseResult）为 reason
self.PromiseResult = reason
// 如果有待执行的callback函数，立即【异步】执行回调函数onRejected
if (self.callbacks.length > 0) {
setTimeout(() => { // 放入队列中执行所有失败的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
})
}, 0)
}
}
// 立即【同步】执行executor函数
try {
executor(resolve, reject)
} catch(error) { // 如果执行器抛出异常，promise对象变成rejected状态
reject(error)
}
}
3. Promise.prototype.then
Promise.prototype.then = function (onResolved, onRejected) {
const self = this
return new Promise((resolve, reject) => {
if (self.PromiseState === PENDING) { // 假如当前状态还是pending状态，将回调函数保存起来
self.callbacks.push({
onResolved(value) {
// onResolved(self.PromiseResult)
try {
const result = onResolved(self.PromiseResult) // 执行成功的回调 result接收返回值
if (result instanceof Promise) { // 3. 如果回调函数返回的是promise
// result.then(
// value => {
// resolve(value) // 当result成功时，让return的promise也成功
// },
// reason => {
// reject(reason) // 当result失败时，让return的promise也失败
// }
// )
result.then(resolve, reject) // 简洁写法
} else { // 2. 如果回调函数返回的不是promise
resolve(result)
}
} catch (error) { //1. 如果抛出异常
reject(error)
}
},
onRejected(reason) {
// onRejected(self.PromiseResult)
try {
const result = onRejected(self.PromiseResult) // 执行失败的回调 result接收返回值
if (result instanceof Promise) { // 3. 如果回调函数返回的是promise
result.then(resolve, reject)
} else { // 2. 如果回调函数返回的不是promise
resolve(result)
}
} catch (error) { //1. 如果抛出异常
reject(error)
}
}
})
} else if (self.PromiseState === RESOLVED) { // resolved
setTimeout(() => {
/**
* 1. 如果抛出异常，return的promise就会失败，reason是error
* 2. 如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
* 3. 如果回调函数返回的是promise，return的promise结果就是这个promise的结果
*/
try {
const result = onResolved(self.PromiseResult) // 执行成功的回调 result接收返回值
if (result instanceof Promise) { // 3. 如果回调函数返回的是promise
// result.then(
// value => {
// resolve(value) // 当result成功时，让return的promise也成功
// },
// reason => {
// reject(reason) // 当result失败时，让return的promise也失败
// }
// )
result.then(resolve, reject) // 简洁写法
} else { // 2. 如果回调函数返回的不是promise
resolve(result)
}
} catch (error) { //1. 如果抛出异常
reject(error)
}
}, 0)
} else { // rejected
setTimeout(() => {
try {
const result = onRejected(self.PromiseResult) // 执行失败的回调 result接收返回值
if (result instanceof Promise) { // 3. 如果回调函数返回的是promise
result.then(resolve, reject)
} else { // 2. 如果回调函数返回的不是promise
resolve(result)
}
} catch (error) { //1. 如果抛出异常
reject(error)
}
}, 0)
}
})
}
简化封装一下
/**
* Promise原型对象then方法
* 指定成功和失败的回调函数
* @param {function} onResolved 成功的回调函数(value) => {}
* @param {function} onRejected 失败的回调函数(reason) => {}
* @returns 一个新的promise对象结果由onResolved/onRejected执行的结果决定
*/
Promise.prototype.then = function (onResolved, onRejected) {
// 指定默认的成功的回调onResolved （向后传递成功的value）
onResolved = typeof onResolved === 'function' ? onResolved : value => value
// 指定默认的失败的回调onRejected（向后传递失败的reason 实现错误/异常传透的关键点）
onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason}
const self = this
return new Promise((resolve, reject) => {
/**
* 调用指定回调函数处理，根据执行的结果改变return的promise的状态
* @param {function} callback 指定回调函数
*/
function handle(callback) {
try {
const result = callback(self.PromiseResult) // result获取回调函数执行(return)的结果
if (result instanceof Promise) { // 3. 如果回调函数返回的是promise
result.then(resolve, reject) // 简洁写法
} else { // 2. 如果回调函数返回的不是promise
resolve(result)
}
} catch (error) { //1. 如果抛出异常
reject(error)
}
}
if (self.PromiseState === PENDING) { // 1. 当前状态是pending状态，将回调函数保存起来
self.callbacks.push({
onResolved(value) { //执行成功的回调函数，改promise的状态
handle(onResolved)
},
onRejected(reason) { //执行失败的回调函数，改promise的状态
handle(onRejected)
}
})
} else if (self.PromiseState === RESOLVED) { // 2. resolved，【异步】执行onResolved并改变return的promise的状态
setTimeout(() => {
handle(onResolved)
}, 0)
} else { // 3. rejected，【异步】执行onRejected并改变return的promise的状态
setTimeout(() => {
handle(onRejected)
}, 0)
}
})
}
4. Promise.prototype.catch
/**
* Promise原型对象catch方法
* 指定失败的回调函数
* @param {function} onRejected 失败的回调函数(reason) => {}
* @returns 一个新的promise对象
*/
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected)
}
5. Promise.resolve
/**
* Promise函数对象resolve方法
* @param {*} value 成功的值
* @returns 一个成功/失败的promise
*/
Promise.resolve = function (value) {
// 返回一个成功/失败的promise
return new Promise((resolve, reject) => {
if (value instanceof Promise) { // value是promise => 使用value的结果作为promise的结果
value.then(resolve,reject)
} else { // value不是promise => promise状态变为成功，数据是value
resolve(value)
}
})
}
6. Promise.reject
/**
* Promise函数对象reject方法
* @param {*} resaon 失败的原因
* @returns 一个失败的promise
*/
Promise.reject = function (reason) {
// 返回一个失败的promise
return new Promise((resolve, reject) => {
reject(reason)
})
}
7. Promise.all
/**
* Promise函数对象all方法
* @param {Array<Promise>} promises
* @returns 一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就失败
*/
Promise.all = function (promises) {
return new Promise((resolve, reject) => {
let count = 0 // 声明计数变量
// const values = []; // 保存每个成功promise结果的数组
const values = new Array(promises.length) // 指定数组长度
for (let i = 0; i < promises.length; i++){
// promises[i].then(value => {
Promise.resolve(promises[i]).then(value => { // 防止数组中有不是promise的元素
// 得知对象状态是成功
count++
// 将当前promise对象成功的结果存入到数组中
values[i] = value
if (count === promises.length) { //每个promise对象都成功
resolve(values) // 修改函数状态
}
}, reason => {
reject(reason)
})
}
})
}
8. Promise.race
/**
*Promise函数对象race方法
* @param {Array<Promise>} promises
* @returns 返回 一个promise，其结果由第一个完成的promise决定
*/
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++){
// promises[i].then(value => {
Promise.resolve(promises[i]).then(value => { // 防止数组中有不是promise的元素
// 修改返回对象的状态为 成功
resolve(value)
}, reason => {
reject(reason)
})
}
})
}
9. 自定义函数对象方法Promise.resolveDelay&Promise.rejectDelay
/**
* 自定义方法 延时返回一个成功/失败的promise
* @param {*} value 成功的数据
* @param {Number} timeout 延迟时间
* @returns 一个成功/失败的promise
*/
Promise.resolveDelay = function (value, timeout) {
// 延时返回一个成功/失败的promise
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value instanceof Promise) { // value是promise => 使用value的结果作为promise的结果
value.then(resolve,reject)
} else { // value不是promise => promise状态变为成功，数据是value
resolve(value)
}
})
}, timeout);
}
/**
* 自定义方法 延时返回一个失败的promise
* @param {*} reason 失败的原因
* @param {*} timeout 延迟时间
* @returns 一个失败的promise
*/
Promise.rejectDelay = function (reason, timeout) {
// 延时返回一个失败的promise
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(reason)
}, timeout)
})
}
10. class写法
/**
* 自定义Promise函数模块：IIFE
*/
(function (window) {
const PENDING = 'pending'
const RESOLVED = 'fulfilled'
const REJECTED = 'rejected'
class Promise {
/**
* Promise构造函数
* @param {function} executor 执行器函数（同步执行）(resolve, reject) => {}
*/
constructor(executor) {
const self = this; // 保存当前实例对象的this的值
// 添加属性
self.PromiseState = PENDING // 给promise对象指定status属性，初始值为pending
self.PromiseResult = null // 给promise对象指定一个用于存储结果数据的属性
self.callbacks = [] // 存的是对象 每个元素的结构：{onResolved() {}, onRejected() {}}
/**
* executor内部定义成功时调用的函数
* @param {*} value 成功的值
* @returns
*/
function resolve(value) {
// 如果当前状态不是pending，直接结束
if (self.PromiseState !== PENDING) return
// 1. 修改对象的状态（promiseState）为 fulfilled
self.PromiseState = RESOLVED
// 2. 设置对象结果值（promiseResult）为 value
self.PromiseResult = value
// 如果有待执行的callback函数，立即【异步】执行回调函数onResolved
if (self.callbacks.length > 0) {
setTimeout(() => { // 放入队列中执行所有成功的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
})
}, 0)
}
}
/**
* executor内部定义失败时调用的函数
* @param {*} reason 失败的原因
* @returns
*/
function reject(reason) {
// 如果当前状态不是pending，直接结束
if (self.PromiseState !== PENDING) return
// 1. 修改对象的状态（promiseState）为 rejected
self.PromiseState = REJECTED
// 2. 设置对象结果值（promiseResult）为 reason
self.PromiseResult = reason
// 如果有待执行的callback函数，立即【异步】执行回调函数onRejected
if (self.callbacks.length > 0) {
setTimeout(() => { // 放入队列中执行所有失败的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
})
}, 0)
}
}
// 立即【同步】执行executor函数
try {
executor(resolve, reject)
} catch (error) { // 如果执行器抛出异常，promise对象变成rejected状态
reject(error)
}
}
/**
* Promise原型对象then方法
* 指定成功和失败的回调函数
* @param {function} onResolved 成功的回调函数(value) => {}
* @param {function} onRejected 失败的回调函数(reason) => {}
* @returns 一个新的promise对象结果由onResolved/onRejected执行的结果决定
*/
then (onResolved, onRejected) {
// 指定默认的成功的回调onResolved （向后传递成功的value）
onResolved = typeof onResolved === 'function' ? onResolved : value => value
// 指定默认的失败的回调onRejected（向后传递失败的reason 实现错误/异常传透的关键点）
onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason}
const self = this
return new Promise((resolve, reject) => {
/**
* 调用指定回调函数处理，根据执行的结果改变return的promise的状态
* @param {function} callback 指定回调函数
*/
function handle(callback) {
try {
const result = callback(self.PromiseResult) // result获取回调函数执行(return)的结果
if (result instanceof Promise) { // 3. 如果回调函数返回的是promise
result.then(resolve, reject) // 简洁写法
} else { // 2. 如果回调函数返回的不是promise
resolve(result)
}
} catch (error) { //1. 如果抛出异常
reject(error)
}
}
if (self.PromiseState === PENDING) { // 1. 当前状态是pending状态，将回调函数保存起来
self.callbacks.push({
onResolved(value) { //执行成功的回调函数，改promise的状态
handle(onResolved)
},
onRejected(reason) { //执行失败的回调函数，改promise的状态
handle(onRejected)
}
})
} else if (self.PromiseState === RESOLVED) { // 2. resolved，【异步】执行onResolved并改变return的promise的状态
setTimeout(() => {
handle(onResolved)
}, 0)
} else { // 3. rejected，【异步】执行onRejected并改变return的promise的状态
setTimeout(() => {
handle(onRejected)
}, 0)
}
})
}
/**
* Promise原型对象catch方法
* 指定失败的回调函数
* @param {function} onRejected 失败的回调函数(reason) => {}
* @returns 一个新的promise对象
*/
catch (onRejected) {
return this.then(undefined, onRejected)
}
/**
* Promise函数对象resolve方法
* @param {*} value 成功的值
* @returns 一个成功/失败的promise
*/
static resolve(value) {
// 返回一个成功/失败的promise
return new Promise((resolve, reject) => {
if (value instanceof Promise) { // value是promise => 使用value的结果作为promise的结果
value.then(resolve,reject)
} else { // value不是promise => promise状态变为成功，数据是value
resolve(value)
}
})
}
/**
* Promise函数对象reject方法
* @param {*} resaon 失败的原因
* @returns 一个失败的promise
*/
static reject (reason) {
// 返回一个失败的promise
return new Promise((resolve, reject) => {
reject(reason)
})
}
/**
* Promise函数对象all方法
* @param {Array<Promise>} promises
* @returns 一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就失败
*/
static all (promises) {
return new Promise((resolve, reject) => {
let count = 0 // 声明计数变量
// const values = []; // 保存每个成功promise结果的数组
const values = new Array(promises.length) // 指定数组长度
for (let i = 0; i < promises.length; i++){
// promises[i].then(value => {
Promise.resolve(promises[i]).then(value => { // 防止数组中有不是promise的元素
// 得知对象状态是成功
count++
// 将当前promise对象成功的结果存入到数组中
values[i] = value
if (count === promises.length) { //每个promise对象都成功
resolve(values) // 修改函数状态
}
}, reason => {
reject(reason)
})
}
})
}
/**
*Promise函数对象race方法
* @param {Array<Promise>} promises
* @returns 返回 一个promise，其结果由第一个完成的promise决定
*/
static race (promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++){
// promises[i].then(value => {
Promise.resolve(promises[i]).then(value => { // 防止数组中有不是promise的元素
// 修改返回对象的状态为 成功
resolve(value)
}, reason => {
reject(reason)
})
}
})
}
/**
* 自定义方法 延时返回一个成功/失败的promise
* @param {*} value 成功的数据
* @param {Number} timeout 延迟时间
* @returns 一个成功/失败的promise
*/
static resolveDelay (value, timeout) {
// 延时返回一个成功/失败的promise
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value instanceof Promise) { // value是promise => 使用value的结果作为promise的结果
value.then(resolve,reject)
} else { // value不是promise => promise状态变为成功，数据是value
resolve(value)
}
})
}, timeout);
}
/**
* 自定义方法 延时返回一个失败的promise
* @param {*} reason 失败的原因
* @param {*} timeout 延迟时间
* @returns 一个失败的promise
*/
static rejectDelay (reason, timeout) {
// 延时返回一个失败的promise
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(reason)
}, timeout)
})
}
}
// 向外暴露Promise函数
window.Promise = Promise
})(window)
自己写法：
class Promise{
//构造函数
constructor(executor){
//给实例添加属性
this.PromiseState="pending";
this.PromiseResult=null;
this.callbacks=[];//用来保存成功或者失败的回调函数
//保存实例对象的this的值，因为Resolve函数执行是在实例化后的windows执行，
//而不是构造函数执行的，所以指向它的调用者是windows调用的。
const self=this;
//resolve函数
function resolve(data){
//判断状态：因为状态只能修改一次
if( self.PromiseState !="pending") return;
//1，修改对象的状态(promiseState)
self.PromiseState="fulfilled";//resolved也表示成功
//2，设置对象结果值(promiseResult)
self.PromiseResult=data;
//setTimeout加promise里的是当promise执行器里为异步调用触发
setTimeout(() => {//使其进入回调队列进行异步调用。(保证then方法使异步调用)，
self.callbacks.forEach(item=>{//遍历执行异步操作的回调，如果是同步执行这个callbacks数组的值为空的
item.onResolve(data);
});
});
}
//reject函数
function reject(data){
//判断状态：因为状态只能修改一次
if( self.PromiseState !="pending") return;
//1，修改对象的状态(promiseState)
self.PromiseState="rejected";
//2，设置对象结果值(promiseResult)
self.PromiseResult=data;
setTimeout(() => {
self.callbacks.forEach(item=>{//遍历执行异步操作的回调
item.onReject(data);
});
});
}
//处理thrw抛异常
try{
//同步调用(执行器函数)，这里要调用传进来的执行器函数，注意resolve或reject并没有在这里调用，如果是同步操作，
//是在Promise实例的then里面调用的。如果是异步，则由事件模块负责将resolve或reject放入回调队列进行调用。
executor(resolve,reject);
}catch(e){
//修改状态并且返回对象结果值。
reject(e);
}
}
//then方法封装
then(onResolve,onReject){
const self=this;//保存当前这个实例对象的this
//判断失败的回调函数参数是否存在
if(typeof onReject!=='function'){
onReject=reason=>{
throw reason;
}
}
//判断成功的回调函数参数是否存在
if(typeof onResolve !=='function'){
onResolve=value=>value;
}
return new Promise((resolve,reject)=>{
//封装方法
function callback(type){
try{//有可能用户在tnen方法的第一个参数的匿名函数里会throw一个异常，所以try它。
let result=type(self.PromiseResult);
//判断promise实例的then方法的第一个参数(即成功的匿名回调函数)的返回结果是不是一个Promise的实例，
//因为有时候可能会在这里面返回一些值类型的数据，有时候又return一个pronise的实例。
if(result instanceof Promise){
//这个result是外面Promise实例调用then方法里的第一个匿名函数的返回值。如果没有设置返回值，
//那么，外面的then方法返回的promise实例的PromiseResult属性的值就为null。
//进入这个里面说明promise实例的then方法里的第一个匿名函数的返回值返回的是一个promise的实例，这时候的状态就要根据这个实例的
//PromiseState属性来了。
//既然result也是promise的实例，那么，它也有then方法，这个result如果是成功，那么肯定是走这两个方法中的第一个，
result.then(v=>{
resolve(v);//因为result实例成功也就代表整个then返回的那个promise对象成功。所以调用resolve方法即可改变整体返回的promise实例的状态。
},r=>{
reject(r);
});
}else{
//进入else就表示，用户这个方法里返回的是一个非promise的实例，可能是字符串或者number或者对象....
//进入这个判断，根据then方法的性质，返回的promise实例的状态一定是成功(fulfilled)。
//改变状态通过resolve方法
resolve(result);
}
}catch(error){
reject(error);
}
}
//判断调用成功的回调还是失败的回调
//这里的this是隐式绑定，即哪个对象调用这个函数，this就是哪个对象，这里then()被promise的实例调用 this指向promise的实例
if(this.PromiseState==="fulfilled"){
//setTimeout加then里的是当promise执行器里为同步调用触发
setTimeout(() => {//使调用改变状态为成功的函数在调用时异步执行，也就是将then方法里的匿名函数放入回调队列作为异步执行
callback(onResolve);
});
}
if(this.PromiseState==="rejected"){
setTimeout(() => {
callback(onReject);
});
}
//这个步骤是用来判断promise里是否是异步调用执行器函数的resolve或者是reject参数，也就是Promise构造函数被调用时，
//当resolve或者reject没有套在定时器回调里面的话，那么就是同步的，就直接用上面两个判断就可，
//如果不是同步的，才会用这个判断。上面两个是同步时直接调用(同步时就在then方法里调用)，这个是异步时就做绑定。
if(this.PromiseState==="pending"){
this.callbacks.push({
onResolve:function(){
callback(onResolve);
},
onReject:function(){
callback(onReject);
}
});
}
});
}
//catch方法封装
catch(onReject){
return this.then(undefined,onReject);
}
//resolve封装
static resolve=function(value){
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
//因为外面是传递的promise的实例进来，所以promise实例遇到then方法就会调用该方法。
value.then(v=>{
resolve(v);
},r=>{
reject(r);
});
}else{
//状态设置为成功
resolve(value);
}
});
}
//reject
static reject(value){
return new Promise((resolve,reject)=>{
reject(value);
});
}
static all(promises){
return new Promise((resolve,reject)=>{
let count=0;
let arr=[];
for(let i=0;i<promises.length;i++){
//因为外面是传递的promise的实例数组进来，所以promise实例遇到then方法就会调用该方法。
promises[i].then(v=>{
count++;
arr[i]=v;
if(count===promises.length){
resolve(arr);
}
},r=>{
reject(r);
});
}
});
}
static race(promises){
return new Promise((resolve,reject)=>{
for(let i=0;i<promises.length;i++){
promises[i].then(v=>{
resolve(v);
},r=>{
reject(r);
});
}
});
}
}
