探索 Promise 的精妙之处：理解与实现

2024-01-26 14:28:18

Promise 的概念和工作原理

在 JavaScript 中，Promise 是一种用于处理异步操作的工具，它允许您将异步操作的结果传递给其他操作，而无需显式地使用回调函数。

当您调用一个异步函数时，它会立即返回一个 Promise 对象。该 Promise 对象代表了异步操作的结果，它有两个状态：已解决（resolved）或已拒绝（rejected）。

如果异步操作成功完成，则 Promise 对象将被标记为已解决，并且您可以使用 Promise 的 then 方法来访问其结果。如果异步操作失败，则 Promise 对象将被标记为已拒绝，并且您可以使用 Promise 的 catch 方法来处理错误。

Promise 的实现

下面是一个简单的 Promise 实现：

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') return;

      this.state = 'fulfilled';
      this.result = value;
      this.onFulfilledCallbacks.forEach((callback) => callback(value));
    };

    const reject = (error) => {
      if (this.state !== 'pending') return;

      this.state = 'rejected';
      this.result = error;
      this.onRejectedCallbacks.forEach((callback) => callback(error));
    };

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

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

        this.onRejectedCallbacks.push((error) => {
          setTimeout(() => {
            try {
              const result = onRejected(error);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

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

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

  static all(promises) {
    return new Promise((resolve, reject) => {
      const results = [];
      let pendingCount = promises.length;

      promises.forEach((promise, index) => {
        promise
          .then((result) => {
            results[index] = result;
            pendingCount--;
            if (pendingCount === 0) {
              resolve(results);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    });
  }

  static race(promises) {
    return new Promise((resolve, reject) => {
      promises.forEach((promise) => {
        promise
          .then((result) => {
            resolve(result);
          })
          .catch((error) => {
            reject(error);
          });
      });
    });
  }
}

这个 Promise 实现虽然简单，但它已经包含了 Promise 的核心功能。您可以使用它来编写自己的 Promise 代码，并更好地理解 Promise 的工作原理。

Promise 的 API 和规范

Promise 有一个标准的 API，它定义了 Promise 对象可以使用的所有方法。这些方法包括：

then：用于注册回调函数，以便在 Promise 对象的状态改变时执行这些回调函数。
catch：用于注册回调函数，以便在 Promise 对象被拒绝时执行这个回调函数。
finally：用于注册回调函数，以便在 Promise 对象的状态改变时（无论是被解决还是被拒绝）执行这个回调函数。
all：用于将多个 Promise 对象组合成一个新的 Promise 对象。
race：用于将多个 Promise 对象组合成一个新的 Promise 对象，只要其中任何一个 Promise 对象的状态改变，这个新的 Promise 对象的状态就会改变。

Promise 规范定义了 Promise 的行为和语义。它规定了 Promise 对象的状态、如何使用 Promise 对象以及 Promise 对象的各种方法的详细行为。

Promise 在 JavaScript 中的使用

Promise 在 JavaScript 中被广泛用于处理异步操作。例如，您可以使用 Promise 来处理 AJAX 请求、读取文件、或者执行其他耗时的操作。

Promise 的使用非常简单，只需要遵循以下几个步骤：

创建一个 Promise 对象。
在 Promise 对象上注册回调函数。
在异步操作完成时，调用 Promise 对象的 resolve 方法或 reject 方法来改变 Promise 对象的状态。

Promise 的反模式

在使用 Promise 时，您需要注意一些常见的反模式，这些反模式可能会导致代码难以理解和维护。这些反模式包括：

滥用 Promise： 不要滥用 Promise，只有在真正需要处理异步操作时才使用 Promise。
嵌套 Promise： 不要嵌套太多的 Promise，否则代码会变得难以理解和维护。
不处理错误： 不要忘记处理 Promise 对象的错误，否则错误可能会被忽略。
使用 Promise.all 来等待所有操作完成： 不要总是使用 Promise.all 来等待所有操作完成，有时使用 Promise.race 更合适。
不使用 finally 方法： 不要忘记使用 finally 方法来清理资源，即使 Promise 对象被拒绝了。