promise的内部实现

代码:代码浅显易懂,用来提醒自己。路过的可以看看,底部附上大佬代码出处。

const PENDING = 'pending'; //初始状态
const FULFILLED = 'fulfilled'; // 成功状态
const REJECTED = 'rejected'; // 成功
function Promise(extutor){
  let self = this;
  self.status = PENDING; // 设置状态
  // 存放成功回调的数组
  self.onResolveCallbacks = [];
  // 存放失败回调的数组
  self.onRejectedCallbacks = [];
  function resolve(value){
    if(self.status === PENDING){
      self.status = FULFILLED;
      self.value = value;
      self.onResolveCallbacks.forEach(cb => cd(self.value))
    }
  } 
  function reject(reason){
    if(self.status === PENDING){
      self.status = REJECTED;
      self.value = reason;
      self.onRejectCallbacks.forEach(cb => cd(self.value))
    }
  } 
  try{
    excutor(resolve, reject)
  } catch(e) {
    reject(e)
  }
}



Promise.prototype.then = function(onFulfilled, onRejected){
  // 如果成功和失败的回调没有传,表示这个then没有任何逻辑,只负责把值往后抛
  onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : value => value
  onRejected = typeof onRejected == 'function' ? onRejected : reason => { throw reason }
  let self = this;
  let promise2;
  // 实现链式调用,每一种状态都要返回的是一个promise实例
  if(self.status == FULFILLED){ // 如果promise状态已经是成功态,onFulfilled直接取值
    return  promise2 = new Promise(function(resolve, reject){
      setTimeout(function(){  // 保证返回的promise是异步
        try{
          onFulfilled(self.value)
        } catch (e){
          //  如果执行成功的回调过程中出错,用错误原因把promise2 reject
          reject(e)
        }
      })
    })
  }
  if( self.status == REJECTED){
    return promise2 = new Promise(function(){
      setTimeout(function(){
        try{
          onFulfilled(self.value)
        } catch (e){
          reject(e)
        }
      })
    })
  }
  if(self.status === PENDING){
    return promise2 = new Promise(function(resolve, reject){
      // pending 状态时就会把所有的回调函数都添加到实例中的两个堆栈中暂存,等状态改变后依次执行,其实这个过程就是观察者模式
      self.onResolveCallbacks.push(function(){
        setTimeOut(function(){
          try{
            onFulfilled(self.value)
          } catch(e){
            reject(e)
          }
        })
      })
    })
    self.onRejectCallbacks.push(){
      setTimeOut(function(){
        try{
          onRejected(self.value)
        } catch(e){
          reject(e)
        }
      })
    }
  }
}

大佬博客:https://www.jianshu.com/p/8d3bd325e886

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Promise是一种用于处理异步操作的机制,它可以将异步操作的结果以同步的方式进行处理和返回。Promise实现原理主要包括以下几个方面: 1. Promise的状态:Promise有三个状态,分别是pending(等待状态)、fulfilled(成功态)和rejected(失败态)。起初,Promise的状态为pending,当异步操作执行完毕后,状态会变为fulfilled或rejected。 2. Promise的构造函数:Promise构造函数内部提供了resolve和reject两个方法。resolve方法用于将Promise的状态修改为fulfilled,同时执行成功回调函数;reject方法用于将Promise的状态修改为rejected,同时执行失败回调函数。一旦状态被修改,就不可逆转。 3. Promise的链式调用:每一个Promise都有一个then方法,then方法返回一个新的Promise对象,这样就可以实现链式调用。通过链式调用,可以实现多个异步操作的顺序执行。 4. Promise的catch方法:catch方法是then方法的一种特殊形式,用于捕获Promise链中的异常,以便进行错误处理。catch方法也支持链式调用。 5. Promise的finally方法:finally方法也是then方法的一种特殊形式,它返回一个新的Promise对象,并在前一个Promise的状态改变后执行。它通常用于无论Promise的状态如何,都需要执行一些最终的操作。 6. Promise的静态方法:Promise还提供了一些静态方法,如Promise.resolve、Promise.reject和Promise.all。Promise.resolve方法返回一个新的Promise对象,并将其状态修改为fulfilled;Promise.reject方法返回一个新的Promise对象,并将其状态修改为rejected;Promise.all方法用于接收一个包含多个Promise的数组,并在所有Promise都成功后返回一个新的Promise对象。 以上是Promise实现原理。通过这种机制,我们可以更方便地处理异步操作,避免了回调地狱的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值