ES6 Promise实现原理与应用详解

Promise 是 JavaScript 中处理异步操作的强大工具，自从 ES6 引入以来，极大地简化了异步编程的复杂度。本文将深入探讨 ES6 Promise 的实现原理，并列举其在实际开发中的应用。

Promise 的基本概念

Promise 是一个表示异步操作最终完成或失败的对象。它有三种状态：

Pending（进行中）：初始状态，既没有被完成，也没有被拒绝。
Fulfilled（已成功）：意味着操作成功完成。
Rejected（已失败）：意味着操作失败。

一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变只有两种可能：从 Pending 变为 Fulfilled 和从 Pending 变为 Rejected。

Promise 的实现原理

Promise 的实现主要包括以下几个关键部分：

构造函数：

function Promise(executor) {
    let self = this;
    self.status = 'pending'; // 初始状态
    self.value = undefined; // 成功的值
    self.reason = undefined; // 失败的原因
    self.onResolvedCallbacks = []; // 成功回调队列
    self.onRejectedCallbacks = []; // 失败回调队列

    function resolve(value) {
        if (self.status === 'pending') {
            self.status = 'fulfilled';
            self.value = value;
            self.onResolvedCallbacks.forEach(fn => fn());
        }
    }

    function reject(reason) {
        if (self.status === 'pending') {
            self.status = 'rejected';
            self.reason = reason;
            self.onRejectedCallbacks.forEach(fn => fn());
        }
    }

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

then 方法：

Promise.prototype.then = function(onFulfilled, onRejected) {
    let self = this;
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };

    let promise2 = new Promise((resolve, reject) => {
        if (self.status === 'fulfilled') {
            setTimeout(() => {
                try {
                    let x = onFulfilled(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            }, 0);
        }

        if (self.status === 'rejected') {
            setTimeout(() => {
                try {
                    let x = onRejected(self.reason);
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            }, 0);
        }

        if (self.status === 'pending') {
            self.onResolvedCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(self.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                }, 0);
            });

            self.onRejectedCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        let x = onRejected(self.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                }, 0);
            });
        }
    });

    return promise2;
};

resolvePromise 函数：这个函数用于处理 then 方法返回的新 Promise 对象的解析过程，确保 Promise 的链式调用能够正确处理返回值。

Promise 的应用

异步操作的链式调用：

fetch('some-url')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

并行处理多个异步操作：

Promise.all([promise1, promise2, promise3]).then(values => {
    console.log(values);
});

错误处理： Promise 提供了 .catch 方法来捕获链式调用中的任何错误，简化了错误处理流程。
异步函数的封装：可以将异步操作封装成 Promise，使得代码更易读和维护。

通过理解 ES6 Promise 的实现原理，我们不仅能更好地使用 Promise，还能在需要时自己实现一个简化版的 Promise 库，进一步理解 JavaScript 异步编程的本质。希望本文对你理解和应用 Promise 有帮助。