如何实现一个简化版的Promise

waiting

问题

function Promise(xxx) {
  xxx
  return xxx
}

var promise = new Promise(function(x, y){
  setTimeout(() => {
    x(101)
  }, 3000) 
})

promise.then((z) => {
  console.log(z)  // 101
 })

解决思路

• 从上面使用自己实现的Promise时，可以看到传入的参数是一个函数，那么确定Promise的参数类型是Function，同时它返回的内容里还有一个then方法，它也接受一个函数作为参数，根据对Promise的了解，它应接受两个函数：

function Promise(fn) {
  ...
  return {
    then: function(successFn, errorFn) {
      return undefiend;  //如果不写默认return undefined，这里我们只做一次then，如果要用then链，可能需要递归调用
    }
  }
}

• 同时我们需要去执行传进来的这个函数，它实际上有两个函数作为参数，则必然：

function Promise(fn) {
  fn.call(undefined, successNotify, errorNotify); // fn接受两个函数作为参数

  return {
    then: function(successFn, errorFn) {
      return undefined;
    }
  }
}

• fn接受的两个函数需要单独定义：

function Promise(fn) {
  function successNotify() {}

  function errorNotify() {}

  fn.call(undefined, successNotify, errorNotify); // fn接受两个函数作为参数

  return {
    then: function(successFn, errorFn) {
      return undefined;
    }
  }
}

• 为了让fn的处理函数能够正确反映Promise的状态，需要添加一个状态变量：

function Promise(fn) {
  let status = 'pending';

  function successNotify() {
    status = 'resolved';
  }

  function errorNotify() {
    status = 'rejected';
  }

  fn.call(undefined, successNotify, errorNotify); // fn接受两个函数作为参数

  return {
    then: function(successFn, errorFn) {
      return undefined;
    }
  }
}

• 接下来我们要处理then传进来的函数，如果成功你那个解决了，就要处理then传进来的成功函数，否则要处理失败函数，因此用两个单独的队列放传进来的函数：

function Promise(fn) {
  
  let status = 'pending';
  
  let successArray = [];
  let errorArray = [];
  
  function successNotify() {
    status = 'resolved';
  }
  
  function errorNotify() {
    status = 'rejected';
  }
  
  fn.call(undefined, successNotify, errorNotify); //fn接受两个函数作为参数
  
  return {
    then: function(successFn, errorFn) {
      successArray.push(successFn);
      errorArray.push(errorFn);
      return undefined; // 如果不写默认return undefined，这里我们只做一次then，如果要用then链，可能需要递归调用
    }
  }
}

• 只有在处理好之后才会处理then里面传递的内容，新增一个对then的处理函数：

function Promise(fn) {
  let status = 'pending';
  
  let successArray = [];
  let errorArray = [];
  
  function successNotify() {
    status = 'resolved';
    handleThen.apply(undefined, arguments);
  }
  
  function errorNotify() {
    status = 'rejected';
    handleThen.apply(undefined, arguments);
  }
  
  function handleThen() {
    if (status === 'resolved') {
      for (let i = 0; i < successArray.length; i++) {
        successArray[i].apply(undefined, arguments);
      }
    } else if (status === 'rejected') {
      for (let i = 0; i < errorArray.length; i++) {
        errorArray[i].apply(undefined, arguments);
      }
    }
  }
  
  fn.call(undefined, successNotify, errorNotify); //fn接受两个函数作为参数
  
  return {
    then: function(successFn, errorFn) {
      successArray.push(successFn);
      errorArray.push(errorFn);
      return undefined; // 如果不写默认return undefined，这里我们简化，只做一次then，如果要用then链，可能需要递归调用
    }
  }
}

• 为了确保回调是异步执行的，用setTimeout裹一层：

function Promise(fn) {
  let status = 'pending';
  
  let successArray = [];
  let errorArray = [];
  
  function successNotify() {
    status = 'resolved';
    handleThen.apply(undefined, arguments);
  }
  
  function errorNotify() {
    status = 'rejected';
    handleThen.apply(undefined, arguments);
  }
  
  function handleThen() {
    setTimeout(() => {
      if (status === 'resolved') {
        for (let i = 0; i < successArray.length; i++) {
          successArray[i].apply(undefined, arguments);
        }
      } else if (status === 'rejected') {
        for (let i = 0; i < errorArray.length; i++) {
          errorArray[i].apply(undefined, arguments);
        }
      }
    });
  }
  
  fn.call(undefined, successNotify, errorNotify); //fn接受两个函数作为参数
  
  return {
    then: function(successFn, errorFn) {
      successArray.push(successFn);
      errorArray.push(errorFn);
      return undefined; // 如果不写默认return undefined，这里我们简化，只做一次then，如果要用then链，可能需要递归调用
    }
  }
}