实现一个 Promise

漠小妹
589 阅读4分钟

对前端感兴趣的小伙伴，可以关注我的 Github 

做为一名IT界比较少的物种 “程序媛”，经常会把 “感觉” 挂在嘴边，由于有过设计的背景，童鞋们都会觉得这只是一个女性化艺术化的词汇，emm...... 也有大佬把“感觉” 与 “经验” 划上等号，其实这是很片面的，在我看来“感觉” = “经验” + “创造”，而创造离不开知其然知其所以然，so....要对码代码这件事情有感觉，就要深入底层，多造轮子，慢慢的就爱上啦....

有兴趣可以查看 官方实现

Promise 是什么

Promise 主要就是为了解决异步回调的问题。

用 Promise 来处理异步回调使得代码层次清晰，便于理解，且更加容易维护，符合开放封闭原则。

Promise 场景

先宏观感受一下 Promise 的使用

面试题：后端分两次返回数据，第一次返回 ID 数组，第二次根据第一次返回的 ID 去请求数据

const ids = [1, 2, 3, 4, 5]
const data = {
    1: 'data1',
    2: 'data2',
    3: 'data3',
    4: 'data4',
    5: 'data5',
}
resData = (data) => (
    new Promise((resolve, request) => {
        setTimeout(resolve, 1000, data, )
    })
)
resData(ids).then((ids) => {
    ids.forEach((id) => {
        resData(data).then(
            console.log(data[id])
        )
    })
}).catch(e => {
  console.log(e);
})

最终我们写的promise同样可以实现这个功能

实现 MyPromise

Promise 有三种状态：

  • Pending: 进行中

  • Resolved: 已成功

  • Rejected: 已失败

先定义三个标识状态的变量：

// 三种状态
const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

为了避免在核心函数中使用 try/catch，所以先封装一层

var LAST_ERROR = null;
var IS_ERROR = {};
function getThen(obj) {
  try {
    return obj.then;
  } catch (ex) {
    LAST_ERROR = ex;
    return IS_ERROR;
  }
}

function tryCallOne(fn, a) {
  try {
    return fn(a);
  } catch (ex) {
    LAST_ERROR = ex;
    return IS_ERROR;
  }
}
function tryCallTwo(fn, a, b) {
  try {
    fn(a, b);
  } catch (ex) {
    LAST_ERROR = ex;
    return IS_ERROR;
  }
}

我们需要两个私有变量：

  • 标识Promise当前的状态：currentState

  • 记录Promise的最终值：value

我们自己不能实现内部属性，JS中私有属性特性(#修饰符现在还是提案)暂时也没有支持，所以暂且用"_"前缀规定私有属性，这样就模拟了Promise 中的两个内部属性。

实现骨架

实现三个静态方法及一个原型方法

  • resolve

  • reject

  • catch

  • then

    function MyPromise(fn) { if (typeof this !== 'object') { throw new TypeError('必须通过 new 来创建 Promise实例'); } if (typeof fn !== 'function') { throw new TypeError('Promise 的参数必须是 function'); } this._deferredState = 0; this._state = 0; this._value = null; this._deferreds = null; doResolve(fn, this); } Promise._onHandle = null; Promise._onReject = null; Promise.prototype.then = (

实现 resolve 和 reject

可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。

   // 如果 value 是个Promise，递归执行
    if(value instanceof MyPromise) {
      return value.then(_this.resolve, _this.reject)
    }
    // 异步执行，保证执行顺序
    setTimeout(() => {
      if(_this.currentState === PENDING) {
        _this.currentState = RESOLVED
        _this.value = value
        _this.resolvedCallbacks.forEach(cb => cb())
      }
    })

  _this.reject = function (reason) {
    setTimeout(() => {
      if(_this.currentState === PENDING) {
        _this.currentState = REJECTED
        _this.value = reason
        _this.rejectedCallbacks.forEach(cb => cb())
      }
    })
  }

实现then

then 方法内部逻辑稍微复杂点，并且有一点一定一定一定要注意到: then 方法中的回调是异步执行的，思考下下段代码:

console.log(1);
new Promise((resolve,reject)=>{
    console.log(2);
    resolve();
})
.then(()=>console.log(3));
console.log(4);

执行结果是什么呢？答案其实是: 1 2 4 3。传入 Promise 中的执行函数是立即执行完的啊，为什么不是立即执行 then 中的回调呢？因为 then 中的回调是异步执行，表示该回调是插入事件队列末尾，在当前的同步任务结束之后，下次事件循环开始时执行队列中的任务。

大体实现一下 then 的框架：

onResolved 和 onRejected 都是可选的参数，即如果类型不是 function ，需要忽略处理，同时也实现了透传。

当 Promise 的当前状态 Pending 时，缓存实例 (该返回值是一个新的实例而不是之前的实例。因为 Promise 规范规定除了 pending 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 then 调用就失去意义了）；否则异步执行传入的 onResolved 或者 onRejected

MyPromise.prototype.then = function(onResolved, onRejected) {
  var self = this
  // then 必须返回一个新的 promise
  var promise2
  // onResolved 和 onRejected 都为可选参数
  // 如果类型不是 function ，需要忽略，同时也实现了透传
  // Promise.resolve(4).then().then(value => console.log(value))
  onResolved = typeof onResolved === 'function' ? onResolved : v => v;
  onRejected = typeof onRejected === 'function' ? onRejected : r => throw r;

  if (self.currentState === RESOLVED) {
    return (promise2 = new MyPromise((resolve, reject) => {
      setTimeout(() => {
        // 异步执行onResolved
        try {
          var x = onResolved(self.value);
          // resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      })
    }))
  }
  if (self.currentState === REJECTED) {
    return (promise2 = new MyPromise((resolve, reject) => {
      setTimeout(() => {
        // 异步执行onRejected
        try {
          var x = onRejected(self.value);
          // resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      })
    }))
  }
  if (self.currentState === REJECTED) {
    return (promise2 = new MyPromise((resolve, reject) => {
        // 缓存实例到 resolvedCallbacks 或者 rejectedCallbacks
        self.resolvedCallbacks.push(function () {
        // 考虑到可能会有报错，所以使用 try/catch 包裹
        try {
          var x = onResolved(self.value);
          // resolutionProcedure(promise2, x, resolve, reject);
        } catch (r) {
          reject(r);
        }
      });

      self.rejectedCallbacks.push(function () {
        try {
          var x = onRejected(self.value);
          // resolutionProcedure(promise2, x, resolve, reject);
        } catch (r) {
          reject(r);
        }
      });
        
    }))
  }
}

以上就是根据 Promise / A+ 规范来实现的代码，可以通过 promises-aplus-tests 的完整测试

promise 最早是在 commonjs 社区提出来的，当时提出了很多规范。比较接受的是 promise/A 规范。后来人们在这个基础上。提出了 promise/A+规范，也就是实际上的业内推行的规范。ECMAScript 6.0 也是采用的这种规范。

Promise 的缺点

  1. 无法取消Promise，一旦新建它就会立即执行，无法中途取消

  2. 如果不设置回调函数，Promise 内部抛出的错误不会反应到外部

  3. 当处于 Pending 状态时，无法得知目前进展到哪一个阶段

----

avatar
文章
阅读
粉丝