Promise的分层解析及实现与原理剖析

2023-12-09 07:50:44

Promise：掌控JavaScript中的异步世界

简介

在现代网络应用中，异步操作变得越来越普遍。JavaScript中的Promise提供了一种优雅、强大的方式来处理这些异步操作，而无需诉诸回调或显式事件监听器。本博客将深入探究Promise的内在机制，涵盖其构造函数、状态、方法和分层解析等各个方面。

Promise的构造函数

Promise的构造函数接受一个函数作为参数，称为执行器（executor）。执行器函数携带两个参数：resolve和reject。resolve函数用于将Promise的状态从“pending”（等待中）变为“fulfilled”（已完成），并向then()方法传递一个值。reject函数则用于将状态变为“rejected”（已拒绝），并向then()方法传递一个错误。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve("成功！");
  }, 1000);
});

Promise的状态

Promise有三种可能的状态：

pending（等待中）： Promise尚未完成，处于等待中。
fulfilled（已完成）： Promise已完成，操作成功。
rejected（已拒绝）： Promise已完成，操作失败。

Promise的then()方法

then()方法用于处理Promise的结果。它接收两个函数参数：onFulfilled和onRejected。当Promise的状态为“fulfilled”时，调用onFulfilled函数处理结果；当Promise的状态为“rejected”时，调用onRejected函数处理错误。

promise.then(
  (result) => {
    console.log("成功：", result);
  },
  (error) => {
    console.log("失败：", error);
  }
);

Promise的catch()方法

catch()方法是then()方法的简写形式，用于处理Promise的状态为“rejected”时的结果。它只接收一个函数参数：onRejected，用于处理错误。

promise.catch((error) => {
  console.log("失败：", error);
});

Promise的finally()方法

finally()方法无论Promise的状态是“fulfilled”还是“rejected”，都会执行。它接收一个函数参数：onFinally，用于执行一些操作，例如清理资源或显示加载指示器。

promise.finally(() => {
  console.log("无论成功还是失败，都会执行");
});

Promise的分层解析

Promise的分层解析允许我们将一个Promise的结果作为另一个Promise的输入。通过嵌套Promise，我们可以创建复杂的异步操作链。

const promise1 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve("成功！");
  }, 1000);
});

const promise2 = promise1.then((result) => {
  return new Promise((resolve, reject) => {
    // 另一个异步操作
    setTimeout(() => {
      resolve("再次成功！");
    }, 1000);
  });
});

promise2.then(
  (result) => {
    console.log("两次成功：", result);
  },
  (error) => {
    console.log("失败：", error);
  }
);

Promise的实现

Promise可以通过JavaScript原生对象实现。以下是一个简化的Promise实现：

class Promise {
  constructor(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(value);
        });
      }
    };

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

    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.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === "rejected") {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            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((reason) => {
          setTimeout(() => {
            try {
              const result = onRejected(reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

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

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