原生es5封装的Promise对象

前端

2023-10-25 01:59:33

原生es5封装的Promise对象

大家好，我是前端技术爱好者小明。今天我要给大家分享一个我最近研究的成果——原生es5封装的Promise对象。Promise是一个非常强大的工具，它可以帮助我们更轻松地编写异步代码。

什么是Promise？

Promise是一个JavaScript对象，它表示一个异步操作的最终完成或失败的状态。我们可以通过then()方法来监听Promise的状态变化，并相应地执行不同的操作。

Promise的状态

Promise有三种状态：

pending： 表示Promise尚未完成或失败。
fulfilled： 表示Promise已经完成，并且成功返回了一个值。
rejected： 表示Promise已经失败，并且抛出了一个错误。

Promise的用法

我们可以使用new Promise()来创建一个新的Promise对象。然后，我们可以在then()方法中添加监听器，以监听Promise的状态变化。

// 创建一个新的Promise对象
const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    // 操作成功
    resolve("成功");
  }, 1000);
});

// 添加监听器
promise.then((result) => {
  // 操作成功后执行
  console.log(result); // 输出："成功"
});

原生es5封装的Promise对象

ES5中并没有原生的Promise对象，但我们可以自己封装一个。下面是一个简单的实现：

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

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

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

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

Promise.prototype.then = function (onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    if (this.state === "fulfilled") {
      onFulfilled(this.value);
    } else if (this.state === "rejected") {
      onRejected(this.reason);
    } else {
      this.onFulfilledCallbacks.push(() => {
        onFulfilled(this.value);
      });
      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason);
      });
    }
  });
};

Promise与Generator/async/await的配合使用

Promise可以与Generator或async/await配合使用，以进一步简化异步代码的编写。

Promise与Generator

function* main() {
  const result = yield new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("成功");
    }, 1000);
  });

  console.log(result); // 输出："成功"
}

const generator = main();
generator.next(); // 启动Generator函数

setTimeout(() => {
  generator.next("成功"); // 向Generator函数传递值
}, 1000);

Promise与async/await

async function main() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("成功");
    }, 1000);
  });

  console.log(result); // 输出："成功"
}

main();