手写 Promise：掌握异步编程的利器

前端

2023-10-19 15:30:21

什么是 Promise？

Promise 是 JavaScript 中用来处理异步编程的利器，它可以帮助您轻松管理异步操作，让您的代码更加清晰易读。Promise 本质上是一个对象，它代表着异步操作的最终完成或失败的结果。

Promise 的状态

Promise 有三种状态：

pending ：表示异步操作尚未完成。
fulfilled ：表示异步操作已成功完成。
rejected ：表示异步操作已失败。

Promise 的用法

要使用 Promise，您需要先创建一个 Promise 对象，然后调用它的 then() 方法来注册回调函数。当异步操作完成时，Promise 对象会调用相应的回调函数。

以下是一个简单的 Promise 示例：

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

promise.then((result) => {
  console.log(result); // 输出 "Hello, world!"
});

在上面的示例中，我们首先创建了一个 Promise 对象。然后，我们调用它的 then() 方法来注册回调函数。当 setTimeout() 函数执行完成后，Promise 对象会调用回调函数，并将 Hello, world! 作为参数传递给回调函数。

手写 Promise

要手写一个符合 Promise A+ 规范的 Promise，我们需要遵循以下步骤：

定义一个 Promise 构造函数。
在 Promise 构造函数中，创建一个私有变量 _state，用于存储 Promise 的状态。
在 Promise 构造函数中，创建一个私有变量 _value，用于存储 Promise 的结果。
在 Promise 构造函数中，创建一个私有数组 _handlers，用于存储回调函数。
在 Promise 构造函数中，定义一个 then() 方法，用于注册回调函数。
在 then() 方法中，创建一个新的 Promise 对象。
在 then() 方法中，将回调函数添加到 _handlers 数组中。
在 then() 方法中，返回新的 Promise 对象。
在 Promise 构造函数中，定义一个 resolve() 方法，用于将 Promise 的状态设置为 fulfilled。
在 resolve() 方法中，将 Promise 的结果存储到 _value 变量中。
在 resolve() 方法中，调用 _handlers 数组中的所有回调函数。
在 Promise 构造函数中，定义一个 reject() 方法，用于将 Promise 的状态设置为 rejected。
在 reject() 方法中，将 Promise 的结果存储到 _value 变量中。
在 reject() 方法中，调用 _handlers 数组中的所有回调函数。

总结

Promise 是 JavaScript 中用来处理异步编程的利器，它可以帮助您轻松管理异步操作，让您的代码更加清晰易读。您可以使用 Promise 构造函数来创建自己的 Promise 对象，也可以使用 then() 方法来注册回调函数。当异步操作完成时，Promise 对象会调用相应的回调函数。