【手写 Promise 源码】第八篇 - 完善 Promise 并通过 promise-aplus-tests 测试

359 阅读8分钟

一,前言

上一篇,实现 Promise 对返回值 x 各种情况的分析和处理,主要涉及以下几个点:

  • 回顾了相关的 Promise A+ 规范内容;
  • 根据 Promise A+ 规范描述和要求,实现了核心解析方法:resolvePromise;

本篇,继续对 Promise 进行完善并通过 promise-aplus-tests 测试;


二,当前 Promise 的问题

当前版本 Promise 源码,已基本实现了 Promise A+ 规范中的全部要求;

但在实际使用中,以下两种情况仍与原生 Promise 表现不一致:

  • 1,Promise 直接 resolve 一个 Promise;
  • 2,Promise 的 then 中方法返回 promise,这个 promise 又继续 resolve 了一个 promise;

备注

  • 有人会说:1 和 2 两种情况好像是一个事啊?都是 resolve 中又返回了 promise;
  • 先说一下区别,后边详细分析:
    • resolve 中直接返回的 promise,对应源码中的 value;
    • then 中返回的 promise 中的 resolve 中的 promise,对应源码中的 y;

三,情况 1:Promise 直接 resolve 一个 Promise

1,提出问题

如果在 Promise 中的 resolve 传入一个 Promise,结果是怎样的?

new Promise((resolve,reject)=>{
  resolve(new Promise((resolve,reject)=>{
    resolve(100)
  }))
}).then(data=>{
  console.log(data)
})

正常情况下 resolve(100),then 成功回调中的 data 就是 100,所以 data 就是 promise,就是 100;

2,测试原生的 Promise

原生 Promise 返回 100,与预期相符

3,测试手写的 Promise

与原生 Promise 表现不一致,返回 DULFILLED 成功态 promise 对象:

Promise {
  state: 'DULFILLED',
  value: 100,
  reason: undefined,
  onResolvedCallbacks: [],
  onRejectedCallbacks: []
}

4,问题分析

对比手写的 Promise 和原生 Promise 的执行结果,问题出在哪?

new Promise((resolve,reject)=>{
  resolve(new Promise((resolve,reject)=>{  // 这个 promise 就是 value
    resolve(100) // 成功结果
  }))
}).then(data=>{  // 这个 data 就是上边的 promise,所以是 Pending 态
  console.log(data)
})

分析代码的执行流程:

  • 通过 new Promise 创建 promise1 实例,executor1 执行器函数被立即执行;
  • 在 executor1 中,执行了resolve(new Promise),又创建 promise2 实例,executor2 被立即执行;
  • 在 executor2 中,由于没有异步操作,所以继续执行了resolve(100)
  • Promise 源码处理:在 resolve 方法中,存储了 value 值为 100、设置了 promise2 状态为成功态、执行了成功回调(未收集的空数组);
  • 调用 then 方法;
  • Promise 源码处理:then 方法内部创建 promise3,此时,promise2 为 DULFILLED 成功态,执行 onFulfilled 成功回调处理,并将 promise2 作为 data 传给 then的成功回调,也就是 data

这就导致了返回结果是一个 DULFILLED 成功态的 promise 对象;

问题原因:

源码中没有考虑到 resolve(value) 中 value 有可能是 promise 的情况;

    const reslove = (value) =>{
      if(this.state === PENDING){
        this.value = value // value 有可能是一个 promise
        this.state = DULFILLED;
        this.onResolvedCallbacks.forEach(fn=>fn())
      }
    }

解决方案:

添加判断,如果 value 是一个 promise,调用 then 让其执行;

5,代码实现

判断value 是 Promise 类型(必须是自己 Promise 才可以),调用 then 并传入resolve、reject(成功将会调用 resolve;失败将会调用 reject),返回最终 promise 的执行结果;

const reslove = (value) => { 
  // value 是自己实现的 Promise,就调用 then,返回最终结果
  if(value instanceof Promise){
    return value.then(reslove, reject)
  }

  if (this.state === PENDING) {
    this.value = value
    this.state = DULFILLED;
    this.onResolvedCallbacks.forEach(fn => fn())
  }
}

这样,reslove 了一个 promise 时,在源码 reslove 方法中,就会调用它的 then 方法,返回 promise 执行后的结果;

备注:Promise A+ 规范中未对此情况进行说明;


四,情况 2:then 返回的 promise 中,resolve 了 promise(有点儿绕嘴)

1,提出问题

在上一篇中,当 Promise.then 返回 promise 时,核心逻辑resolvePromise如下:

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('发生错误'))
  }
  if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
    try {
      let then = x.then;
      if(typeof then === 'function'){
        // 调用 promise 的 then 方法
        then.call(x, y => {
          resolve(y)     // 更新 promise2 的状态
        }, r => {
          reject(r)
        });
      }else{
        resolve(x)
      }
    } catch (e) {
      reject(e);
    }
  } else {
    resolve(x)
  }
}
  • then 中方法的返回值 y 有可能是 promise,形成 promise 的嵌套;

情况 1 已经处理了 resolve 中是 promise 的情况,这里还会有问题吗?

一般是没有问题的,但这里的 promise 有可能是其他人实现的 Promise; (情况 1 中的 Promise 必须是自己实现的)

2,测试原生的 Promise

let promise2 = new Promise((resolve, reject) => {
  resolve(200)
}).then(data => {
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      resolve(new Promise((resolve, reject) => {
        setTimeout(()=>{
          resolve(data)
        }, 1000)
      }))
    }, 1000)
  })
})
promise2.then(data => {
  console.log(data)
})

// 200

3,测试手写的 Promise

输出结果:
Promise {
  state: 'PENDING',
  value: undefined,
  reason: undefined,
  onResolvedCallbacks: [],
  onRejectedCallbacks: []
}

4,问题分析

let p = new Promise((resolve, reject) => {
  // 1,执行器函数被立即执行
  resolve(200)
}).then(data => {
  // 2,进入成功回调处理,返回Promise
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      resolve(new Promise((resolve, reject) => {
        setTimeout(()=>{
          resolve(data)
        }, 1000)
      }))
    }, 1000)
  })
})
p.then(data => {
  console.log(data)
})

分析代码的执行流程:

  • new Promise 创建实例,executor 执行器函数被立即执行,resolve(200)被执行;
  • Promise 源码处理:在 resolve 方法中,存储了 value 值为 200、设置了 promise 状态为成功态、执行了成功回调(未收集的空数组);
  • 调用 then 方法;
  • Promise 源码处理:then 方法内部创建 promise2-1,此时,p 为 DULFILLED 态,通过 setTimeout 创建宏任务1(获取 onFulfilled 返回值 x,调用resolvePromise 统一解析处理返回值 x),延迟到一下事件循环中处理;
  • 执行p.then;
  • Promise 源码处理:then 方法内部创建新的 promise2-2,由于上个 promise2-1 创建的宏任务 1 尚未执行,所以,上个 promise2-1 的状态仍为 PENDING 态,因此,会对p.then中的成功/失败回调函数进行收集;
  • 至此,代码执行完毕,也就是第一轮宏任务执行完毕了;
  • 宏任务 1 被执行,进入代码中第一个 then 的成功处理,data 为 200,返回值是一个 P promise;
  • Promise 源码处理:内部拿到 then 的返回值 x,调用 resolvePromise 进行统一的解析处理,由于此处 x 是 promise,所以,在 resolvePromise 中会调用它的 then 方法;
  • 但是,由于这个 promise(也就是 x),内部存在异步操作(setTimeout 1秒),所以当调用这个 promise(也就是 x)的 then 方法时,这个 promise(也就是 x)的状态仍为 PENDING 态
  • 一秒后,执行 resolve(new Promise),此时,resolve 中的 promise 就是源码中的 y;

问题原因

  • 手写的源码只处理了 then 中方法的返回值 x;但 resolve 中为 promise 的情况没有处理;(resolve 中的 promise 就是源码中的 y)
  • 由于 y 是一个 promise,所以直接 resolve(y) ,即 then 中的 data,得到的就是 一个 PENDING 态的 promise 实例;

解决方案

  • 由于 y 有可能是一个 promise 对象,所以对 y 使用 resolvePromise 进行递归处理,直到 y 为普通值为止;

相关 Promise A+规范内容:

image.png

5,代码实现

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('发生错误'))
  }
  if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
    try {
      let then = x.then;
      if(typeof then === 'function'){
        then.call(x, y => {
          // resolve(y)
          resolvePromise(promise2, y, resolve, reject) // 递归处理 y
        }, r => {
          reject(r)
        });
      }else{
        resolve(x)
      }
    } catch (e) {
      reject(e);
    }
  } else {
    resolve(x)
  }
}

三,Promise 的兼容处理

在开发中,所使用的 Promise 不一定都是原生的或我们自己实现的;

任何框架/库/开发者都有可能根据 promise A+ 规范实现一个 Promise;

为了确保使用这些 Promise 不会导致项目问题,需要对 Promise 进行兼容处理;

  • 备注 理论上,严格按照 Promise A+ 规范实现的 Promise 是无需进行兼容处理的;所以,兼容处理主要用于弥补实现上的 Promise 漏洞和不严谨;

  • 比如:

let Promise1; // 自己实现的 Promise
let promise2;// 别人实现的 Promise

promise = new Promise1((resolve, reject) => {
  resolve(1);
}).then(() => {
  return new Promise2();
})

Promise 的兼容处理,有以下几处:

  • 每个 Promise 实例的状态只能被改变一次;

四,promise-aplus-tests 测试

promise-aplus-tests 用于测试自己实现的 Promise 是否符合 Promise A+ 规范;

1,安装 promise-aplus-tests

npm install promises-aplus-tests -g

2,添加测试入口-创建延迟对象

  • 创建延迟对象Promise.deferred

延迟对象:一个具有“延时”效果的对象(因为对象中含有 Promise);

通过Promise.deferred方法,测试当前 dfd 对象上的 Promise 实现是否符合 Promise A+ 规范要求;

Promise.deferred = function(){
  let dfd = {}
  dfd.promise = new Promise((resolve,reject)=>{
    dfd.resolve = resolve;
    dfd.reject = reject;
  })
  return dfd;
}

这里使用了延迟对象,可以减少一层嵌套;

  • Promise.deferred方法中,创建了一个 promise 对象dfd.promise
  • 相当于将 resolve/reject 绑定到 dfd.resolve/dfd.reject
  • promise 成功就会调用 deferred 内部的dfd.resolve;失败调用dfd.reject

作用:将 promise 方法迁移到 dfd 对象上,通过对象直接访问能够少一层嵌套;

通过示例看一下延迟对象的效果:

  • 不使用延迟函数:需嵌套一层new Promise
function test() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(200)
    }, 1000);
  })
}
  • 使用延迟函数:无需嵌套new Promise
function test() {
  let dfd = Promise.deferred();
  setTimeout(() => {
    dfd.resolve(200);
  }, 1000);
  return dfd.promise;
}

结论:

  • 对比两种方式代码,使用延迟函数明显少了一层 new Promise 的嵌套;
  • 每次调用Promise.deferred()就能够立即得到一个全新的 promise 实例;
  • 延迟对象,就是对象 deferred 中包含了 Promise 的“延迟”处理;

3,执行测试

promises-aplus-tests  xxx(promise入口文件路径)

image.png

通过了 Promise A+ 规范 872 个测试用例;


五,结尾

本篇,主要对 Promise 源码进行完善并通过 promise-aplus-tests 测试,主要涉及以下几个点:

  • 完善 Promise 源码:支持两种嵌套 promise 的情况;
  • 分析 Promise 的执行过程;
  • 创建延迟对象并通过 promise-aplus-tests 测试;

下篇,继续实现 Promise.resolve 和 Promise.reject;


维护日志

  • 20211102
    • 添加了“延迟函数部分”的说明和示例;
    • 添加了对两种“嵌套返回 promise”的支持;
    • 优化了Promise 执行过程分析的描述;
    • 重新调整了文章一二级目录、结尾、摘要;
  • 20211115
    • 修改错别字;