//三种状态
const PENDING = 'pending' // 等待
const FUlFILLED = 'fulfilled' //成功
const REJECTED = 'rejected' //失败
//定义MyPromise类
class MyPromise{
//在构造函数,定义一个执行器,实例化对象时立即执行
constructor(executor){
try {
executor(this.resolve,this.reject)
} catch (error) {
this.reject(e)
}
}
//定义初始状态为等待
status = PENDING;
//定义成功返回值
value = undefined;
//定义失败原因
reason = undefined;
//初始化成功函数 ,后续会出现多次调用,定为数组
successCallback = [];
//初始话失败函数
failCallback = [];
//定义resolve函数:更改状态为成功,使用箭头函数,使的this指向实例化对象而非window或undefined
resolve = value =>{
//一旦更改状态不可再次修改
if(this.status !== PENDING) return;
this.value = value;//存储value到当前内存中
this.status = FUlFILLED;//更改状态为成功状态
while (this.successCallback.length){
//判断成功回调是否存在 如果存在 调用
this.successCallback.shift()(this.value);
}
}
//定义rejected函数:更改状态为失败
reject = reason =>{
if(this.status !== PENDING) return;
this.reason = reason;//存储value到当前内存中
this.status = REJECTED;//更改为失败状态
while (this.failCallback.length){
//判断成功回调是否存在 如果存在 调用
this.failCallback.shift()(this.reason);
}
}
//定义then方法,有两个回调函数,分别时成功回调successCallBack,失败回调failCallBack
then = (successCallback,failCallback) =>{
//将then的方法参数编程可选参数
successCallback = successCallback?successCallback:value =>value;//普通值或回调函数
failCallback && failCallback?failCallback:reason =>{throw reason};//回调函数或抛出异常
//链式调用 ,将值给下一个then方法,而then接收的时promise对象
//实例化另一个promise2对象,并将函数放入执行器中立即调用
//根据调用的时resolve还是reject执行相应的回调函数
let promise2 = new MyPromise((resolve,reject) => {
if(this.status === FUlFILLED){//成功执行
//因为promise2是执行完之后才能实例化得到,promise2正在执行中获取不到,将其变成异步函数进行获取
setTimeout(() =>{
//将当前参数复制给回调函数,
//由于传入值可能是普通值或者是promise对象
//如果是普通值,直接调用promise
//如果是promise对象 调用then查看promise对象返回的状态,判断是调用reslove还是reject
try {//捕获上一个promise执行then回调方法可能会出现的异常
let x = successCallback(this.value);
reslovePromise(promise2,x,reslove,reject);
} catch (error) {
}
},0)
}else if(this.status === REJECTED){//失败
setTimeout(() =>{
try {
//将当前原因给失败回调函数
let x = failCallback(this.reason);
reslovePromise(promise2,x,reslove, reject);
} catch (error) {
}
},0)
}else{//存在异步回调,等待异步函数执行完
//将成功回调和失败回调存储起来
this.successCallback.push(() =>{
setTimeout(() =>{
try {
let x = successCallback(this.reason);
reslovePromise(promise2,x,reslove, reject);
} catch (error) {
}
},0)
});
this.failCallback.push(() => {
setTimeout(() =>{
try {
let x = failCallback(this.reason);
reslovePromise(promise2,x,reslove, reject);
} catch (error) {
}
},0)
});
}
})
return promise2;
}
//不管成功还是失败最后都会执行一次,后面调用then方法拿到最后的值
finally (callback) {
return this.then(value => {
//调用MyPromise的resolve的方法,不管是同步还是异步的回调方法,都当做promise函数返回
return MyPromise.resolve(callback()).then((value)=>value)
},reason =>{
return MyPromise.resolve(callback()).then(()=>{throw reason})
})
}
//then第二个参数不调用reject回调函数,直接在最后一次调用catch捕获异常
catch(failCallback){
return this.then(undefined,failCallback)
}
//静态方法,无须实例化调用,可直接Promise.all()
//all传入数组,只有都执行完才往下执行then方法
static all (array) {
let result = [];//存储已经执行
let index = 0;//记录值
//最后返回的promise对象
return new MyPromise((resolve,reject) =>{
function addData (key, value) {
index++;
result[key] = value;
//防止数组中存在异步函数,存在,等待异步函数执行完
if(array.length === index){//如果执行的数组都执行了,则长度等于记录值,往下执行
reslove(result);
}
}
//循环调用
for(let i = 0; i <array.length; i++){
let current = array[i];
if(current instanceof Mypromise){
current.then(value => addData(i,value),(reason) => reject(reason))
}else{
//普通值
addData(i,array[i])
}
}
if(array.length === index){
reslove(result);
}
})
}
//直接调用Promise.resolve()更改状态
static reslove (value){
//传入值是promise对象
if(value instanceof Mypromise){
return new Mypromise(resolve => resolve(value))
}else{//普通值直接返回
return value;
}
}
}
function reslovePromise(promise2,x,reslove,reject){
if(promise2 === x){//返回自身
//意思是链式调用自己
return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
//判断x是否是MyPromise的实例
if(promise2 instanceof x){//通过原型判断是自己
//说明是promise对象,调用then方法查看promise状态
x.then(reslove,reject);
}else{
//普通值
reslove(x);
}
}
module.exports = MyPromise;
手写promise
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 咱们书接上文( 点我查看[https://www.jianshu.com/p/565ad78b4b3b] ),继续...
- 咱们书接上文( 点我查看[https://www.jianshu.com/p/5a03197461d8] ),继续...
- 1. Promise A+ 规范 官方英文地址:https://promisesaplus.com/ 中文翻译可参...