手写promise

手写 promise 实现then,catch,finally等

const promiseStatus = {
  PENDING: 'pending',
  FULFILLED: 'fulfilled',
  REJECTED: 'rejected',
}

class myPromise {
  constructor(executor) {
    this.status = promiseStatus.PENDING
    this.value = undefined
    this.error = undefined
    this.resfns = []
    this.errfns = []
    const resolve = (value) => {
      if (this.status === promiseStatus.PENDING) {
        queueMicrotask(() => {
          if (this.status !== promiseStatus.PENDING) return 
          this.status = promiseStatus.FULFILLED
          this.value = value
          this.resfns.forEach((fn) => {
            fn(this.value)
          })
        })
      }
    }

    const reject = (error) => {
      if (this.status === promiseStatus.PENDING) {
        queueMicrotask(() => {
          if (this.status !== promiseStatus.PENDING) return
          this.status = promiseStatus.REJECTED
          this.error = error
          this.errfns.forEach((fn) => {
            fn(this.error)
          })
        })
      }
    }
    executor(resolve, reject)
  }

  // then 方法
  then(resfn, errfn) {
    return new myPromise((resolve, reject) => {
      if (this.status === promiseStatus.FULFILLED && resfn) {
        try {
          const value = resfn(this.value)
          resolve(value)
        } catch (err) {
          reject(err)
        }
      }

      if (this.status === promiseStatus.REJECTED && errfn) {
        try {
          const value = errfn(this.error)
          resolve(value)
        } catch (err) {
          reject(err)
        }
      }

      if (this.status === promiseStatus.PENDING) {
        this.resfns.push(() => {
          try {
            const value = resfn(this.value)
            resolve(value)
          } catch (err) {
            reject(err)
          }
        })
        this.errfns.push(() => {
          try {
            const value = errfn(this.error)
            resolve(value)
          } catch (err) {
            reject(err)
          }
        })
      }
    })
  }

  // catch 方法
  catch(errfn) {
    return this.then(undefined, errfn)
  }

  // finally 方法
  finally(onFinally) {
    return this.then(() => onFinally(),() => onFinally());
  }
  
  // 其余方法就省略了
}

测试:

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    console.log("--- 1 ---");
    resolve(111);
  });
}).then(res => {
  console.log("p1 res :>> ", res);
});

const p2 = new MyPromise((resolve, reject) => {
  console.log("--- 2 ---");
  resolve(222);
});
const p3 = new MyPromise((resolve, reject) => {
  console.log("--- 3 ---");
  resolve(333);
});
const p3 = new MyPromise((resolve, reject) => {
  console.log("--- 3 ---");
  resolve(333);
});
const p4 = new MyPromise((resolve, reject) => {
  console.log("--- 4 ---");
  reject(444);
});
MyPromise.all([p2, p3]).then(res => {
  console.log("p2&p3 res :>> ", res);
});MyPromise.all([p2, p4]).then(res => {
  console.log("p2&p4 res :>> ", res);
}).catch(err => {
  console.log("err :>> ", err);
});

//输出结果

// --- 2 ---
// --- 3 ---
// --- 4 ---
// p2&p3 res :>> [ 222, 333 ]
// err :>> 444
// --- 1 ---
// p1 res :>> 111

参考文章:

手写Promise的基本实现 (超详细)-CSDN博客

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值