/**
* 手动实现promise的功能， 只能保证功能相同。用于来更加深刻的理解promise
* 为什么这里要用一个立即执行函数，因为这里没有用模块化，所以用立即执行函数，防止定义的名字相同，导致全局污染
* @type {{new(): MyPromise, prototype: MyPromise}}
*/
const MyPromise = (() => {
// 定义一些常量
const PENDING = "pending", // 等待状态（未决状态）
RESOLVE = "resolved", // 成功状态 （已决状态）
REJECT = "rejected", // 失败状态 （已决状态）
thenables = Symbol("用于保存成功状态的队列"), //
catchables = Symbol("用来保存失败状态的队列"), //
promiseStatus = Symbol("PromiseStatus"), // 用符号来保存promise的状态，防止外部访问
promiseValue = Symbol("PromiseValue"), // promise的值
changeStatus = Symbol("改变状态的函数"),
execSettledCommon = Symbol("执行已决状态的公共方法"),
createPromise = Symbol("用于创建一个新的promise，用于then或者catch方法后的链式调用");
return class MyPromise {
/**
* 一进来创建promise实例是传入两个方法，一个是resolve, 一个是reject
* @param executor
*/
constructor(executor) {
// 创建promise实例后的状态是pending,值是undefined
this[promiseStatus] = PENDING;
this[promiseValue] = undefined;
this[thenables] = []; //后续处理函数的数组 -> resolved
this[catchables] = []; //后续处理函数的数组 -> rejected
// 成功的状态 已决
const resolve = (data) => {
this[changeStatus](RESOLVE, data, this[thenables]);
};
// 失败的状态 已决
const reject = (err) => {
this[changeStatus](REJECT, err, this[catchables]);
};
// 这里的try catch 用于捕捉 promise里面抛出的错误，抛到上一层
try {
executor(resolve, reject)
} catch (err) {
reject(err);
}
}
/**
* 改变promise状态的方法
* @param status 修改成对应的状态
* @param value 修改的值
* @param queue 修改状态的时候执行放入thenables 或者 catchables队列里面的函数
*/
[changeStatus](status, value, queue) {
// 因为promise的状态是单向传递的，不可逆转的，所以当只有状态为pending的时候才可以往往下走
if (this[promiseStatus] === PENDING) {
this[promiseStatus] = status;
this[promiseValue] = value;
// 当状态改变的时候，执行then/catch队列里面的对应函数
queue.forEach(handler => handler(value));
}
}
/**
* 执行已决状态的后续函数的公共方法
* @param handler 后续处理函数
* @param status 当前状态
* @param queue 如果当前状态是resolve或者reject, 放入对应的thenables 和 catchables的消息队列中
*/
[execSettledCommon](handler, status, queue) {
// 只有当传入的函数是一个函数的时候，才会去执行该函数
if (typeof handler !== "function") {
return;
}
if (this[promiseStatus] === status) {
// 用于模拟promise 是异步的，promise会放到微队列中执行
setTimeout(() => {
handler(this[promiseValue]);
}, 0);
} else {
// 否则放入消息队列
queue.push(handler);
}
}
/**
* 用于创建返回的promise的方法
* @param thenHandler then 后续函数
* @param catchHandler catch 后续函数
* @returns {MyPromise}
*/
[createPromise](thenHandler, catchHandler) {
/**
* 用于内部调用 执行then/catch 的后续函数的操作， 使得外部不能访问，只给内部使用
* @param data 调用传入的数据
* @param handler 传入的then 或者catch 函数
* @param resolve 成功的毁掉
* @param reject 失败的毁掉
*/
function exec(data, handler, resolve, reject) {
try {
// 执行通过then函数来改变状态
const result = handler(data);
// 这里需要判断result 返回的是不是一个promise对象，如果是promise对象，直接直接调用then(成功状态下),或者调用catch
if (result instanceof MyPromise) {
result.then(res => {
resolve(res);
}, err => {
reject(err);
})
} else {
resolve(result);
}
} catch (e) {
reject(e)
}
}
return new MyPromise((resolve, reject) => {
// 使用then一直链式调用
this[execSettledCommon](data => {
exec(data, thenHandler, resolve, reject);
}, RESOLVE, this[thenables]);
// 使用catch一直链式调用
this[execSettledCommon](err => {
exec(err, catchHandler, resolve, reject);
}, REJECT, this[catchables]);
})
}
/**
* 用于接收promise的状态， 也就是resolved状态，或者失败的rejected状态
* @param thenHandler 成功的处理函数
* @param catchHandler 失败的处理函数
*/
then(thenHandler, catchHandler) {
// 因为我们的then 函数或者catch函数放入createPromise 这里面处理了
// this[execSettledCommon](thenHandler, RESOLVE, this[thenables]);
// // 如果在then里面传了catchHandler的函数，执行下面这个代码
// this.catch(catchHandler);
return this[createPromise](thenHandler, catchHandler)
};
/**
* 用于接收promise失败的状态
* @param catchHandler 失败的处理函数
*/
catch(catchHandler) {
// this[execSettledCommon](catchHandler, REJECT, this[catchables]);
return this[createPromise](undefined, catchHandler)
};
/**
* 当所有的promise代码全部完成， 就返回成功的集合，失败一个着返回全部失败
* @param proms promise 数组
* @returns {MyPromise}
*/
static all(proms) {
return new MyPromise((resolve, reject) => {
const promsArrs = proms.map(p => {
const obj = {
hasDone: false,
resultData: undefined,
};
p.then(res => {
obj.hasDone = true;
obj.resultData = res;
// 判断promise数组里面的promise对象是否全部完全
const hasFinishArr = promsArrs.filter(item => !item.hasDone);
if (hasFinishArr.length === 0) {
// 代表所有的promise都已经完成
resolve(promsArrs);
}
}, err => {
reject(err);
});
return obj;
})
})
}
/**
* 当所有的promise数组只要有一个成功 就返回成功，失败就返回失败
* @param proms promise 数组
* @returns {MyPromise}
*/
static race(proms) {
return new MyPromise((resolve, reject) => {
proms.forEach(p => {
p.then(res => {
resolve(res);
}, err => {
reject(err);
})
})
})
}
/**
* promise成功的直接调用
* @param data 结果
* @returns {MyPromise}
*/
static resolve(data) {
// 判断结果是不是一个promise对象
if (data instanceof MyPromise) { // 如果是promise对象，直接返回就好
return data;
} else { // 不是promise对象，直接返回一个promise对象
return new MyPromise((resolve, reject) => {
resolve(data);
})
}
}
/**
* promise的失败的直接调用
* @param err 错误的原因 错误原因直接返回一个promise对象，不会阻塞代码的执行
* @returns {MyPromise}
*/
static reject(err) {
return new MyPromise((resolve, reject) => {
reject(err)
})
}
}
})();使用方法
<script src="Promise.js"></script>
<script>
const pro = new MyPromise((resolve, reject) => {
resolve(12323)
});
pro.then(res => {
console.log("第一次成功:结果是", res);
return "第一次成功返回";
}, err => {
console.log("第一次失败:结果是", err);
throw "第一次失败返回"
}).then(res => {
console.log("第二次成功:结果是", res);
return "第二次成功返回";
}, err => {
console.log("第二次失败:结果是", err);
throw "第二次失败返回"
}).then(res => {
console.log("第三次成功:结果是", res);
return "第三次成功返回";
}, err => {
console.log("第三次失败:结果是", err);
throw "第三次失败返回"
}).then(res => {
console.log("第四次成功:结果是", res);
return "第四次成功返回";
}, err => {
console.log("第四次失败:结果是", err);
throw "第四次失败返回"
}).catch(err => {
console.log("最后的失败结果：", err);
})
// const pro1 = new Promise((resolve, reject) => {
// resolve(1)
// });
// pro1.then(res => {
// console.log(res);
// })
// console.log(2343244)
</script>结果：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
