Promise的实现机制(一)

  开发过程异步请求很常见,但是回调地狱我们还是可以去避免的,这篇文章就不再赘述Promise的具体使用方法,而是探寻一下它的实现机制。首先是一个简单的Promise的例子:

function getInfo(){
  return new Promise(function(reslve,reject){
    http.get(url,function(result){
     reslove(reslut.id)
   })
  })
}

getInfo().then(function(id){...})

  开始的时候最大的疑惑是:.then()的操作怎么就知道我的异步请求成功了?其实内部的原理就是在一个promise的实例里面的then方法注册我所有异步请求成功后的回调,而后通过reslove方法将异步请求结果返回,也就是将之前注册的异步回调一一执行,大概的实现代码就是:

function Promise(fn){
  var value = null
  var callbacks = [] //异步回调的数组

  this.then(function(callbackDone){
    callbacks.push(callbackDone) // 将所有的异步回调放入数组
    return this //支持链式调用
  })

  function reslove(value){
    callbacks.forEach(function(callback){
      callback(value) // 遍历执行异步回调
    })
  }

  fn(reslove)
}

  描述起来就是我们在new Promise()的时候,传入的函数执行异步请求,将异步请求的回调通过调用.then()方法将回调注册入callbacks里,异步请求成功之后执行reslove(result)的方法,将异步回调全部执行。这就是一个Promise最基础版本的实现,那目前的问题就是不能让reslove的方法先于then方法执行,那我们能想到最简单的方法就是加入定时器的延时处理:

function Promise(fn){
  var value = null
  var callbacks = [] //异步回调的数组

  this.then(function(callbackDone){
    callbacks.push(callbackDone) // 将所有的异步回调放入数组
    return this //支持链式调用
  })

  setTimeout(function(){
  // 延时处理
    function reslove(value){
      callbacks.forEach(function(callback){
        callback(value) // 遍历执行异步回调
      })
    }
  },0)

  fn(reslove)

  而接下来就是考虑状态机制的问题了,我们都知道Promise的三个状态:pending,fulfilled,rejected。而且只能是由pending变为fulfilled或rejected且状态不可逆,也就是状态一旦改变就不会再次改变了,那我们将代码稍微改动下:

function Promise(fn){
  var value = null
  var callbacks = [] //异步回调的数组
  var status = 'pending'

  this.then(function(callbackDone){
    if(status === 'pending'){
      callbacks.push(callbackDone) // 将所有的异步回调放入数组
    }
    callbackDone(value)
    return this //支持链式调用
  })

  setTimeout(function(){
  // 延时处理
    function reslove(newValue){
      var value = newValue
      status = 'fulfilled'
      callbacks.forEach(function(callback){
        callback(value) // 遍历执行异步回调
      })
    }
  },0)

  fn(reslove)

  其实以上就是Promise实现的核心代码,后续还会涉及到异常处理和链式Promise,我也需要更进一步的学习,不过目前也是已经了解到Promise内部实现的机制是怎样的,也很有助于我平常使用的时候更好的理解它。那后期会再更一版Promise的实现机制(二),对于异常处理和链式Promise再进行一些探讨

你可能感兴趣的:(前端)