JS：透过手工编写 Promise 体验异步世界中的希望之光

2023-11-19 14:40:04

序言：异步编程的挑战与机遇

前端开发中，异步编程不可避免地扮演着重要角色。为了让程序更好地利用空闲时间，异步编程可以同时执行多个任务，但这也给前端开发者带来了新的挑战。

曾经，回调函数是处理异步操作的主流方式。但随着异步操作变得愈发复杂，回调函数的嵌套层数也随之增加，代码可读性和可维护性因此大打折扣。

此时，Promise 闪亮登场。Promise 提供了一种更加优雅的方式来处理异步操作，它使我们可以将异步操作视为一个承诺，并使用统一的方式来处理成功或失败的结果。

Promise 的构成与运作原理

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

一个 Promise 可以通过 then() 方法添加回调函数，当 Promise 的状态发生变化时，相应的回调函数就会被调用。例如，当 Promise 的状态变为 fulfilled 时，就会调用 then() 方法中提供的第一个回调函数；当 Promise 的状态变为 rejected 时，就会调用 then() 方法中提供的第二个回调函数。

手动构建 Promise

理解了 Promise 的构成与运作原理后，我们就可以尝试手动构建一个 Promise 了。首先，我们需要定义一个 Promise 构造函数，该构造函数接受一个 executor 函数作为参数，executor 函数的两个参数分别为 resolve 和 reject，它们用于改变 Promise 的状态。

接下来，我们需要在 Promise 构造函数内部实现 executor 函数。在 executor 函数中，我们可以使用 setTimeout() 方法模拟一个异步操作。当异步操作成功完成时，我们调用 resolve() 函数将 Promise 的状态变为 fulfilled；当异步操作失败时，我们调用 reject() 函数将 Promise 的状态变为 rejected。

最后，我们需要在 Promise 构造函数外定义 then() 方法。then() 方法接受两个回调函数作为参数，这两个回调函数分别用于处理 Promise 的成功状态和失败状态。

结语：Promise 的价值与应用场景

通过手动构建 Promise，我们对 Promise 的运作原理有了更深入的理解。Promise 可以使我们更轻松地处理异步操作，并使我们的代码更加清晰和易于维护。

在实际开发中，Promise 可以应用于多种场景，例如：