ES6+ 实现一个简版的 Promise

1. 前言

上一节我们学习了 ES6 Promise的基本用法，并且我们知道 Promise 最早出现在社区，所以ES6 中 Promise 也是遵循一个标准的规范的。这个规范就是 Promise A+ 规范也就是任何人都可以遵循这个规范实现一个自己的 Promise，由于每个人实现的方式有所差异，Promise A+ 规范给出了一些要求和兼容方式。

本节我们将根据 Promise A+ 规范实现一个简版的 Promise API。

2. 实现步骤

上一节我们已经知道了 Promise 是一个类，默认接收一个参数 executor（执行器），并且会立即执行。所以首先需要创建一个 Promise 的类，然后传入一个回调函数并执行它，故有如下的初始代码：

class Promise {
  constructor(executor) {
    executor();
  }
}

Promise 有三个状态：等待（padding）、成功（fulfilled），失败（rejected）。默认是等待状态，等待态可以突变为成功态或失败态，所以我们可以定义三个常量来存放这三个状态

const PENDING = 'PENDING';
const RESOLVED = 'RESOLVED';    // 成功态
const REJECTED = 'REJECTED';    // 失败态
class Promise {
  constructor(executor) {
    this.status = PENDING;  // 默认是等待态
    executor();
  }
}

这样我们就知道了 Promise 的基本状态，那内部的状态是怎么突变为成功或失败的呢？这里执行器（executor）会提供两个个方法用于改变 Promise 的状态，所以我们需要在初始化时定义 resolve 和 reject 方法：在成功的时候会传入成功的值，在失败的时候会传入失败的原因。并且每个Promise 都会提供 then方法用于链式调用。

class Promise {
  constructor(executor) {
    this.status = PENDING;
    const resolve = (value) => {};
    const reject = (reason) => {};
    // 执行executor时，传入成功或失败的回调
    executor(resolve, reject);
  }
  then(onfulfilled, onrejected) {
    
  }
}

这时我们就可以开始着手去更改 Promise的状态了，由于默认情况下 Promise 的状态只能从 pending 到 fulfilled 和 rejected 的转化。

class Promise {
  constructor(executor) {
    this.status = PENDING;
    const resolve = (value) => {
      // 只有等待态时才能更改状态
      if (this.status === PENDING) {
        this.status = RESOLVED;
      }
    };
    const reject = (reason) => {
      if (this.status === PENDING) {
        this.status = REJECTED;
      }
    };
    executor(resolve, reject);
  }
  ...
}

成功和失败都会返回对应的结果，所以我们需要定义成功的值和失败的原因两个全局变量，用于存放返回的结果。

class Promise {
  constructor(executor) {
    this.status = PENDING;
    this.value = undefined;
    this.reason = undefined;
    const resolve = (value) => {
      // 只有等待态时才能更改状态
      if (this.status === PENDING) {
        this.value = value;
        this.status = RESOLVED;
      }
    };
    const reject = (reason) => {
      if (this.status === PENDING) {
        this.reason = reason;
        this.status = REJECTED;
      }
    };
    executor(resolve, reject);
  }
  ...
}

这时我们就已经为执行器提供了两个回调函数了，如果在执行器执行时抛出异常时，我们需要使用 try…catch 来补货一下。由于是抛出异常，所以，需要调用 reject 方法来修改为失败的状态。

try {
  executor(resolve, reject);
} catch(e) {
  reject(e)
}

我们知道实例在调用 then 方法时会传入两个回调函数 onfulfilled, onrejected 去执行成功或失败的回调，所以根据状态会调用对应的函数来处理。

then(onfulfilled, onrejected) {
  if (this.status === RESOLVED) {
    onfulfilled(this.value)
  }
  if (this.status === REJECTED) {
    onrejected(this.reason)
  }
}

这样我们就完了 Promise 最基本的同步功能，

let promise = new Promise((resolve, reject) => {
  resolve('value');
  // throw new Error('错误');
  // reject('error reason')
  // setTimeout(() => {
  // resolve('value');
  // }, 1000)
})
promise.then((data) => {
  console.log('resolve response', data);
}, (err) => {
  console.log('reject response', err);
})

用上面的代码对我们写的 Promise 进行验证，通过测试用例可知，我们写的 Promise 只能在同步中运行，当我们使用 setTimeout 异步去返回时，并没有预想的在then的成功回调中打印结果。

对于这种异步行为需要专门处理，如何处理异步的内容呢？我们知道在执行异步任务时 Promise 的状态并没有被改变，也就是并没有执行 resolve 或 reject 方法，但是 then 中的回调已经执行了，这时就需要增加当 Promise 还是等待态的逻辑，在等待态时把回调函数都存放起来，等到执行 resolve 或 reject 再依次执行之前存放的then的回调函数，也就是我们平时用到的发布订阅模式。实现步骤：

首先，需要在初始化中增加存放成功的回调函数和存放失败的回调函数；
然后，由于是异步执行 resolve 或 reject 所以需要在 then 方法中把回调函数存放起来；
最后，当执行 resolve 或 reject 时取出存放的回调函数依次执行。

根据以上的实现步骤可以得到如下的代码：

class Promise {
  constructor(executor) {
    this.status = PENDING;
    this.value = undefined; // 成功的值
    this.reason = undefined; // 失败的原因
+   // 存放成功的回调函数
+    this.onResolvedCallbacks = [];
+    // 存放失败的回调函数
+    this.onRejectedCallbacks = [];
    let resolve = (value) => {
      if (this.status === PENDING) {
        this.value = value;
        this.status = RESOLVED;
+       // 异步时，存放在成功的回调函数依次执行
+       this.onResolvedCallbacks.forEach(fn => fn())
      }
    };
    let reject = (reason) => {
      if (this.status === PENDING) {
        this.value = reason;
        this.status = REJECTED;
+       // 异步时，存放在失败的回调函数依次执行
+       this.onRejectedCallbacks.forEach(fn => fn())
      }
    };
    try {
      executor(resolve, reject);
    } catch(e) {
      reject(e)
    }
  }
  then(onfulfilled, onrejected) {
    if (this.status === RESOLVED) {
      onfulfilled(this.value)
    }
    if (this.status === REJECTED) {
      onrejected(this.reason)
    }
+    if (this.status === PENDING) {
+      this.onResolvedCallbacks.push(() => {
+        // TODO
+        onfulfilled(this.value);
+      })
+      this.onRejectedCallbacks.push(() => {
+        // TODO
+        onrejected(this.reason);
+      })
+    }
  }
}

上面的代码中，在存放回调函数时把 onfulfilled, onrejected 存放在一个函数中执行，这样的好处是可以在前面增加处理问题的逻辑。这样我们就完成了处理异步的 Promise 逻辑。下面是测试用例，可以正常的执行 then 的成功回调函数。

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('100');
  }, 1000)
})
promise.then((data) => {
  console.log('resolve response:', data); // resolve response: 100
}, (err) => {
  console.log('reject response:', err);
})

到这里我们是不是已经基本实现了 Promise 的功能呢？ES6 中的 then 方法支持链式调用，那我们写的可以吗？我们在看下面的一个测试用例：

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('100');
  }, 1000)
})
promise.then((data) => {
  console.log('resolve response:', data); // resolve response: 100
  return 200
}, (err) => {
  console.log('reject response:', err);
}).then((data) => {
  console.log('data2:', data)
}, null)
// TypeError: Cannot read property 'then' of undefined

然而当我们在执行的时候会报错，then 是 undefined。为什么会这样呢？那我们要知道如何满足链式调用的规范，那就是在完成任务后再返回一个Promise 实例。那如何返回一个 Promise 实例呢？在 Promise A+ 规范的 2.2.7 小节在有详细的描述，再实例化一个 promise2 来存放执行后的结果，并返回 promise2。那么我们就要改造 then 方法了。

class Promise {
  ...
  then(onfulfilled, onrejected) {
    let promise2 = new Promise((resolve, reject) => {
      if (this.status === RESOLVED) {
        const x = onfulfilled(this.value)
        resolve(x)
      }
      if (this.status === REJECTED) {
        const x = onrejected(this.reason);
        reject(x)
      }
      if (this.status === PENDING) {
        this.onResolvedCallbacks.push(() => {
            const x = onfulfilled(this.value)
            resolve(x)
        })
        this.onRejectedCallbacks.push(() => {
            const x = onrejected(this.reason);
            reject(x)
        })
      }
    })

    return promise2
  }
}

再使用上面的测试用例，就可以得到正确的结果：

let promise = new Promise((resolve, reject) => {
  resolve('100');
})
promise.then((data) => {
  console.log('data1:', data);  // data1: 100
  return 200
}, null).then((data) => {
  console.log('data2:', data);  // data2: 200
  throw new Error('error')
}, null).then(null, () => {
  consol.log('程序报错...')
})

上面的测试用例中，当 then 的回调函数抛出异常时需要去捕获错误，传到下一个 then 的失败回调函数中。

class Promise {
  ...
  then(onfulfilled, onrejected) {
        let promise2 = new Promise((resolve, reject) => {
      if (this.status === RESOLVED) {
        try{
            const x = onfulfilled(this.value)
            resolve(x)
        } catch(e) {
            reject(e)
        }
      }
      if (this.status === REJECTED) {
        try{
            const x = onrejected(this.reason);
            resolve(x)
        } catch(e) {
            reject(e)
        }
      }
      if (this.status === PENDING) {
        this.onResolvedCallbacks.push(() => {
          try{
            const x = onfulfilled(this.value)
            resolve(x)
          } catch(e) {
            reject(e)
          }
        })
        this.onRejectedCallbacks.push(() => {
          try{
            const x = onrejected(this.reason);
            resolve(x)
          } catch(e) {
            reject(e)
          }
        })
      }
    })
    return promise2
  }
}

到这里为止我们就已经实现了一个简版的 Promise，因为Promise是一个规范，很多人都可以实现自己的 Promise 所以 Promise A+ 规范做了很多兼容处理的要求，如果想实现一个完整的 Promise 可以参考 Promise A+ 规范。

3. 小结

本节主要按照 Promise A+ 规范部分的要求实现了一个简版的 Promise API 这个 Promise 基本上满足同步异步的链式调用，对基本的异常做了处理。当然 Promise A+ 规范所规定的细节比较多，剩下的都是对各种异常错误的处理，所以后面我们也没有去实现。另外官网下提供了一个测试用例来验证我们写的 Promise 是否符合 Promise A+ 规范，所以可以参考 promises-tests 这个库来完成我们的 Promise 的测试。

【译】 Promises/A+ 规范

ES6+ 实现一个简版的 Promise

1. 前言​

2. 实现步骤​

3. 小结​

1. 前言

2. 实现步骤

3. 小结