自己实现一个Promise

2019-10-16  本文已影响0人  Eileen_1d88

一、先实现一个只能处理同步任务的promise

var noop = function(){};
function PromiseA(fn) {
  this._state = 0;
  this._value = null;
  doResolve(this, fn);
}
PromiseA.prototype.then = function(onFulfilled, onRejected) {
  var cb = this._state === 1 ? onFulfilled : onRejected;
  var ret = cb(this._value);
  var promise = new PromiseA(noop);
  promise._state = this._state;
  promise._value = ret;
  return promise;
};
function doResolve(promise, fn) {
  fn((res) => {
    _resolve(promise, res);
  }, (error) => {
   _ reject(promise, error);
  })
}

function _resolve(promise, res) {
  promise._state = 1;
  promise._value = res;
}

function _reject(promise, res) {
  promise._state = 2;
  promise._value = res;
}

二、增加异步处理

var noop = function(){};
function PromiseA(fn) {
  this._state = 0;
  this._value = null;
  this._deferreds = [];
  doResolve(this, fn);
}
PromiseA.prototype.then = function(onFulfilled, onRejected) {
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function(v) { return v};
  onRejected = typeof onRejected === 'function' ? onRejected : function(r) { return r };
  var promise = new PromiseA(noop);
  // 如果是异步的话,那么执行到这里的时候,this._state还是0
  if (this._state === 0) {
    promise._state = this._state;
    // 将当前的promise和它的回调存在this._deferreds中
    this._deferreds.push({
      promise: promise,
      onFulfilled: onFulfilled,
      onRejected: onRejected
    });
  } else {
    var cb = this._state === 1 ? onFulfilled : onRejected;
    var ret;
    if (cb) {
       ret = cb(this._value);
    }
   this._state === 1 ? _resolve(promise, ret) : _reject(promise, ret);
  }
  return promise;
};
function doResolve(promise, fn) {
  try {
    fn((res) => {
      _resolve(promise, res);
    }, (error) => {
      _reject(promise, error);
    })
  } catch(e) {
    _reject(promise, e);
  }

}

function _resolve(promise, newValue) {
  // 如果promise已经执行过,即_state = 1,则什么都不做
  if (promise._state === 1) return;
  // 如果this._deferreds中有未处理的异步回调,则依次执行
  if (promise._deferreds.length !== 0) {
    promise._deferreds.forEach((deferred) => {
      var ret = deferred.onFulfilled(res);
      _resolve(deferred.promise, ret);
    });
    promise._deferreds = [];
    return;
  }
  promise._state = 1;
  promise._value = newValue;
}

function _reject(promise, newValue) {
  if (promise._state === 2) return;
  if (promise._deferreds.length !== 0) {
    promise._deferreds.forEach((deferred) => {
      var ret = deferred.onRejected(res);
      _reject(deferred.promise, ret);
    });
    promise._deferreds = [];
    return;
  }
  promise._state = 2;
  promise._value = newValue;
}

三、返回的是一个promise

var noop = function(){};
function PromiseA(fn) {
  this._state = 0;
  this._value = null;
  this._deferreds = [];
  doResolve(this, fn);
}
PromiseA.prototype.then = function(onFulfilled, onRejected) {
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function(v) { return v};
  onRejected = typeof onRejected === 'function' ? onRejected : function(r) { return r };
  var promise = new PromiseA(noop);
  // 如果是异步的话,那么执行到这里的时候,this._state还是0
  if (this._state === 0) {
    promise._state = this._state;
    // 将当前的promise和它的回调存在this._deferreds中
    this._deferreds.push({
      promise: promise,
      onFulfilled: onFulfilled,
      onRejected: onRejected
    });
  } else {
    var cb = this._state === 1 ? onFulfilled : onRejected;
    var ret;
    if (cb) {
      ret = cb(this._value);
    }
    this._state === 1 ? _resolve(promise, ret) : _reject(promise, ret)
  }
  return promise;
};
function doResolve(promise, fn) {
  try {
    fn((res) => {
      _resolve(promise, res);
    }, (error) => {
      _reject(promise, error);
    })
  } catch(e) {
    _reject(promise, e);
  }

}

function _resolve(promise, newValue) {
  // 如果promise已经执行过,即_state = 1,则什么都不做
  if (promise._state === 1) return;
  // 如果返回值就是Promise, 则调用他很方法,取到新的返回值
  if (newValue instanceof PromiseA) {
    // 需要把新的返回值赋到之前的.then返回的promise上
    newValue.then((res) => {
      _resolve(promise, res);
    }, (reason) => {
      _reject(promise, reason)
    });
    return;
  }
  // promise._deferreds中有未处理的异步回调,则依次执行
  if (promise._deferreds.length !== 0) {
    promise._deferreds.forEach((deferred) => {
      var ret = deferred.onFulfilled(newValue);
      _resolve(deferred.promise, ret);
    });
    promise._deferreds = [];
    return;
  }
  promise._state = 1;
  promise._value = newValue;
}

function _reject(promise, newValue) {
  if (promise._state === 2) return;

  // start ----------------------------------------------------------------------
  if (newValue instanceof PromiseA) {
    newValue.then((res) => {
      _resolve(promise, res);
    }, (reason) => {
      _reject(promise, reason)
    });
    return;
  }
  // end ----------------------------------------------------------------------

  if (promise._deferreds.length !== 0) {
    promise._deferreds.forEach((deferred) => {
      var ret = deferred.onRejected(newValue);
      _reject(deferred.promise, ret);
    });
    promise._deferreds = [];
    return;
  }
  promise._state = 2;
  promise._value = newValue;
}

至此,promise的功能基本有了, 因为一些细节的问题,跟真正的promise会有一些出入,之后慢慢完善。

上一篇下一篇

猜你喜欢

热点阅读