实现一个 Promise

·  阅读 446

对前端感兴趣的小伙伴,可以关注我的 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 状态,可以通过函数 resolvereject ,将状态转变为 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 的框架:

onResolvedonRejected 都是可选的参数,即如果类型不是 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 状态时,无法得知目前进展到哪一个阶段

----

收藏成功!
已添加到「」, 点击更改