Promise从零实现：一步步教你掌握异步控制

"这篇文章主要讲解如何实现Promise的使用，通过示例代码帮助读者理解Promise的工作原理，适合初学者。文章还提及Promise在JavaScript历史中的发展，包括jQuery的贡献和ES6及以后版本的推广。" 在JavaScript的世界里，Promise是处理异步操作的重要工具，它有效地解决了回调地狱的问题，使得异步编程变得更加清晰和可维护。Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。当Promise创建时，它的状态默认为pending，并且一旦状态改变，就不能再次更改，这就是Promise的核心特性——不可变性。 首先，我们创建一个名为`Deferred`的类，模拟Promise的行为。这个类有一个构造函数，接受一个回调函数作为参数。回调函数内部有两个关键的方法：`resolve`和`reject`，它们分别用于将Promise状态从pending转变为fulfilled或rejected。 ```javascript class Deferred { constructor(callback) { const resolve = () => { // 待实现的resolve逻辑 }; const reject = () => { // 待实现的reject逻辑 }; try { callback(resolve, reject); } catch (error) { reject(error); } } } ``` 在`Deferred`类中，我们需要定义一个状态变量来保存Promise的状态。根据Promise/A+规范，这个状态应是私有的，不能直接访问。我们可以用一个枚举常量表示这些状态： ```javascript const STATUS = { PENDING: 'pending', FULFILLED: 'fulfilled', REJECTED: 'rejected', }; ``` 接着，我们需要在`Deferred`类中维护这个状态，并添加一个私有属性`_status`来保存它。同时，为了确保状态改变的正确性，我们需要添加两个私有方法`_fulfill`和`_reject`，这两个方法会检查当前状态是否可以改变，并且只允许从pending变为fulfilled或rejected。 ```javascript class Deferred { constructor(callback) { this._status = STATUS.PENDING; this._value = undefined; this._reason = undefined; const resolve = value => { if (this._status !== STATUS.PENDING) return; this._status = STATUS.FULFILLED; this._value = value; // 其他处理成功的逻辑... }; const reject = reason => { if (this._status !== STATUS.PENDING) return; this._status = STATUS.REJECTED; this._reason = reason; // 其他处理失败的逻辑... }; try { callback(resolve, reject); } catch (error) { reject(error); } } // 其他方法如then、catch等... } ``` 至此，我们已经实现了Promise的基本状态管理和状态转换。然而，为了完整地模拟Promise的行为，还需要添加`then`、`catch`等方法来处理Promise链式调用。`then`方法用于处理成功的结果，`catch`则用于捕获并处理错误。这两个方法都会返回一个新的Promise，以便链式调用。 ```javascript class Deferred { // ... 省略状态管理代码 ... then(onFulfilled, onRejected) { return new Deferred((resolve, reject) => { if (this._status === STATUS.FULFILLED) { try { const result = onFulfilled(this._value); if (result instanceof Deferred) { result.then(resolve, reject); } else { resolve(result); } } catch (error) { reject(error); } } else if (this._status === STATUS.REJECTED) { if (onRejected) { try { const result = onRejected(this._reason); if (result instanceof Deferred) { result.then(resolve, reject); } else { resolve(result); } } catch (error) { reject(error); } } else { reject(this._reason); } } else { // 如果状态是PENDING，等待状态改变后再执行 this._thenResolve = onFulfilled; this._thenReject = onRejected; } }); } catch(onRejected) { return this.then(null, onRejected); } } ``` 以上代码展示了如何构建一个简单的Promise实现。当然，实际的Promise实现还要考虑更多的细节，比如错误处理和微任务调度，但这个基础版本足以让我们理解Promise的基本原理和使用方法。通过这样的学习，你可以更好地掌握Promise的使用，从而在实际开发中避免回调地狱，写出更优雅的异步代码。