技术公开课：手写Promise，完美掌握前端异步编程

2023-10-27 09:20:53

作为前端开发者，精通Promise无疑是一项必备技能，它能够帮助我们构建更加健壮、可维护的应用程序。

## 剖析Promise本质，实现规范编写

Promise是一门用来处理异步编程的规范。通过对Promise的深入剖析，理解其核心思想，我们便能从根本上理解异步编程。

Promise相较于回调函数的优势：

1. 可读性更强： Promise 使用 then 方法来处理成功和失败的结果，这使得代码更加清晰易读。

2. 可组合性： Promise 可以使用 then 方法进行链式调用，这使得代码更加紧凑，也更容易管理。

3. 错误处理： Promise 提供了 catch 方法来处理错误，这使得错误处理更加简单。

4. 避免回调地狱： 使用 Promise 可以避免回调地狱，使代码更加可维护。

亲自动手，手把手教你手写Promise

第一步：创建Promise对象

function Promise(executor) {
  this.state = 'pending';
  this.value = undefined;
  this.reason = undefined;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

  const resolve = (value) => {
    if (this.state === 'pending') {
      this.state = 'fulfilled';
      this.value = value;
      this.onFulfilledCallbacks.forEach((callback) => callback(this.value));
    }
  };

  const reject = (reason) => {
    if (this.state === 'pending') {
      this.state = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach((callback) => callback(this.reason));
    }
  };

  executor(resolve, reject);
}

第二步：添加then方法

Promise.prototype.then = function (onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      setTimeout(() => {
        try {
          const value = onFulfilled(this.value);
          resolve(value);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else if (this.state === 'rejected') {
      setTimeout(() => {
        try {
          const reason = onRejected(this.reason);
          resolve(reason);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const value = onFulfilled(this.value);
            resolve(value);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });
      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            const reason = onRejected(this.reason);
            resolve(reason);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });
    }
  });
};