从初识到精通：打造符合 Promises/A+ 规范的 Promise

2024-01-30 04:41:44

揭开 Promise 的神秘面纱
在 JavaScript 中，我们经常会遇到异步操作，如网络请求、定时器、文件读写等。这些操作的特点是它们不会立即返回结果，而是需要一段时间后才能完成。为了处理这些异步操作，我们可以使用回调函数。然而，回调函数很容易导致代码嵌套过多，形成难以理解的“回调地狱”。

Promise 的出现正是为了解决这个问题。它提供了一种更优雅的方式来处理异步操作，使代码更加清晰和易于维护。

构建自己的 Promise

为了更好地理解 Promise 的工作原理，我们不妨自己动手构建一个符合 Promises/A+ 规范的 Promise。

1. 准备工作

首先，我们需要定义一个 Promise 类。这个类将包含 Promise 的所有方法和属性。

class Promise {
  constructor(executor) {
    // ...
  }
}

2. 构造函数

Promise 的构造函数接收一个执行函数 executor 作为参数。executor 函数有两个参数，resolve 和 reject。resolve 用于将 Promise 的状态从 pending 转换为 fulfilled，reject 用于将 Promise 的状态从 pending 转换为 rejected。

constructor(executor) {
  this._state = 'pending';
  this._value = undefined;
  this._reason = undefined;
  this._onFulfilledCallbacks = [];
  this._onRejectedCallbacks = [];

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

3. 状态管理

Promise 有三种状态：pending、fulfilled 和 rejected。pending 表示 Promise 尚未完成，fulfilled 表示 Promise 已成功完成，rejected 表示 Promise 已失败完成。

get state() {
  return this._state;
}

get value() {
  return this._value;
}

get reason() {
  return this._reason;
}

4. then 方法

then 方法是 Promise 最重要的一个方法。它可以注册两个回调函数，分别用于处理 fulfilled 状态和 rejected 状态。

then(onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    this._onFulfilledCallbacks.push(() => {
      try {
        const value = onFulfilled(this._value);
        resolve(value);
      } catch (error) {
        reject(error);
      }
    });

    this._onRejectedCallbacks.push(() => {
      try {
        const reason = onRejected(this._reason);
        resolve(reason);
      } catch (error) {
        reject(error);
      }
    });
  });
}

5. catch 方法

catch 方法是 then 方法的语法糖。它只注册一个回调函数，用于处理 rejected 状态。

catch(onRejected) {
  return this.then(undefined, onRejected);
}

6. finally 方法

finally 方法无论 Promise 的状态是 fulfilled 还是 rejected，都会执行指定的回调函数。

finally(onFinally) {
  return this.then(
    (value) => {
      onFinally();
      return value;
    },
    (reason) => {
      onFinally();
      throw reason;
    }
  );
}

Promise 的使用技巧

掌握了 Promise 的基本用法后，我们还可以学习一些进阶技巧，让 Promise 的使用更加得心应手。

1. 链式调用

Promise 的 then 方法可以实现链式调用。这使得我们可以将多个 Promise 串联起来，形成一个异步操作的流水线。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise1
  .then((value) => {
    console.log(value); // Hello, world!
    return value.toUpperCase();
  })
  .then((value) => {
    console.log(value); // HELLO, WORLD!
  });

2. 并发编程

Promise 还支持并发编程。我们可以使用 Promise.all() 方法来同时执行多个 Promise，并等待它们都完成后再进行下一步操作。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Goodbye, world!');
  }, 2000);
});

Promise.all([promise1, promise2])
  .then((values) => {
    console.log(values); // ['Hello, world!', 'Goodbye, world!']
  });

3. 错误处理

Promise 的错误处理也非常方便。我们可以使用 catch 方法来捕获 Promise 中发生的错误，并进行相应的处理。

const promise = new Promise((resolve, reject) => {
  throw new Error('Oops!');
});

promise
  .then((value) => {
    console.log(value);
  })
  .catch((reason) => {
    console.log(reason); // Error: Oops!
  });