实现一个简单的Promise

212 阅读1分钟

Promise 学习

Promise是解决js中回调地狱的一种方式,它是一个对象,用来传递异步操作的消息,它的结果需要过一段时间才能知道(异步的意思),它会经历三种状态:pending, resolve, reject,当处于pending状态时,一段时间之后它只能走向resolve或者reject,并且结果不能反转,即:它的结果不能由resolve走向reject,同时reject也不能走向resolve.在ES6中已经内置了Promise对象,使用它的好处:

  1. 可以避免回调地狱,可以链式调用;
  2. 代码清晰;

自己实现一个简单的Promise

思路:先定义一个Promise构造函数,里面有五个变量:成功回调函数的参数值,失败回调函数的参数值,状态,存放then中成功的回调,存放then中失败的回调;两个回调方法:resolve 和 reject;以及在原型链上添加then方法;

代码实现(假如命名为:myPromise.js):

function Promise(executor) {
  let self = this;
  self.value = undefined;
  self.reason = undefined;
  self.status = 'pending';
  self.onResolvedCallbacks = []; 
  self.onRejectedCallbacks = [];
  function resolve(value) {
    if (self.status === 'pending') { // 判断状态,防止从resolve状态到reject状态
      self.value = value;
      self.status = 'resolved';
      self.onResolvedCallbacks.forEach(fn => fn());
    }
  }
  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason;
      self.status = 'rejected';
      self.onRejectedCallbacks.forEach(fn => fn());
    }
  }
  try {
    executor(resolve, reject);
  }catch(e) {
    reject(e);
  }
}
Promise.prototype.then = function(onFulfilled, onRejected) {
  let self = this;
  if (self.status === 'resolved') {
    onFulfilled(self.value);
  }
  if (self.status === 'rejected') {
    onRejected(self.reason);
  }
  if (self.status === 'pending') {
    self.onResolvedCallbacks.push(() => {
      onFulfilled(self.value);
    });
    self.onRejectCallbacks.push(() => {
      onRejected(self.reason);
    });
  }
}
module.exports = Promise

代码使用:

let Promise = require('./myPromise');
let promise = new Promise((resolve, reject) => {
  reject(); // 这里随意写个结果,你可以先自己定义
});
promise.then((data) => {
  console.log('success:' + data);
}, (err) => {
  console.log('error:' + err);
})

划水结束

以上是实现promise的简单功能,我们可以根据 Promise A+规范自己去完完整整实现Promise。