极简版promise

南易_站长

阅读量：4907

极简版promise

##### 极简版promise

考虑到上述实现方法还是太全面，完全依照规范来写的，不直观且难懂。下面写一个极简版的实现方式，以便大家理解和在面试时使用：

```jsx
function promise () {
  this.status = 'pending' // 2.1
  this.msg = '' // 存储value与reason
  let process = arguments[0],
       that = this
  process (function () {
    that.status = 'resolve'
    that.msg = argument[0]
  }, function () {
    that.status = 'reject'
    that.msg = argument[0]
  })
  return this
}

promise.prototype.then = function () {
  if (this.status === 'resolve') {
    arguments[0](this.msg)
  } else if (this.status === 'reject' && arguments[1]) {
    arguments[1](this.msg)
  }
}
```

作者：南宫__  
链接：https://www.jianshu.com/p/27735abb91eb  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

```

const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";

function MyPromise(fn) {
  // 保存初始化状态
  var self = this;

// 初始化状态
  this.state = PENDING;

// 用于保存 resolve 或者 rejected 传入的值
  this.value = null;

// 用于保存 resolve 的回调函数
  this.resolvedCallbacks = [];

// 用于保存 reject 的回调函数
  this.rejectedCallbacks = [];

// 状态转变为 resolved 方法
  function resolve(value) {
    // 判断传入元素是否为 Promise 值，如果是，则状态改变必须等待前一个状态改变后再进行改变
    if (value instanceof MyPromise) {
      return value.then(resolve, reject);
    }

// 保证代码的执行顺序为本轮事件循环的末尾
    setTimeout(() => {
      // 只有状态为 pending 时才能转变，
      if (self.state === PENDING) {
        // 修改状态
        self.state = RESOLVED;

// 设置传入的值
        self.value = value;

// 执行回调函数
        self.resolvedCallbacks.forEach(callback => {
          callback(value);
        });
      }
    }, 0);
  }

// 状态转变为 rejected 方法
  function reject(value) {
    // 保证代码的执行顺序为本轮事件循环的末尾
    setTimeout(() => {
      // 只有状态为 pending 时才能转变
      if (self.state === PENDING) {
        // 修改状态
        self.state = REJECTED;

// 设置传入的值
        self.value = value;

// 执行回调函数
        self.rejectedCallbacks.forEach(callback => {
          callback(value);
        });
      }
    }, 0);
  }

// 将两个方法传入函数执行
  try {
    fn(resolve, reject);
  } catch (e) {
    // 遇到错误时，捕获错误，执行 reject 函数
    reject(e);
  }
}

MyPromise.prototype.then = function(onResolved, onRejected) {
  // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数
  onResolved =
    typeof onResolved === "function"
      ? onResolved
      : function(value) {
          return value;
        };

onRejected =
    typeof onRejected === "function"
      ? onRejected
      : function(error) {
          throw error;
        };

// 如果是等待状态，则将函数加入对应列表中
  if (this.state === PENDING) {
    this.resolvedCallbacks.push(onResolved);
    this.rejectedCallbacks.push(onRejected);
  }

// 如果状态已经凝固，则直接执行对应状态的函数

if (this.state === RESOLVED) {
    onResolved(this.value);
  }

if (this.state === REJECTED) {
    onRejected(this.value);
  }
};

```

表情

登录

注册

南易_站长

阅读量：4907

极简版promise

评论