js promise es5怎么试下

在ES5中实现类似于Promise的功能，可以使用回调函数、事件监听器或手动编写一个简单的Promise类。 其中，手动编写一个简单的Promise类是最为接近原生Promise的实现方式，并且能够更好地理解Promise的核心概念。以下是一个简化版的Promise实现：

核心观点：使用回调函数、事件监听器、手动编写Promise类。

下面，我们将详细介绍如何在ES5中手动编写一个简化版的Promise类。

一、手动编写Promise类的基础

手动编写Promise类的基础在于理解Promise的内部机制和实现方式。一个Promise主要包含以下几个部分：

状态管理：Promise具有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
执行器函数：Promise在创建时需要传入一个执行器函数，该函数会立即执行，并接收两个参数：resolve和reject。
then方法：用于注册回调函数，当Promise状态变为fulfilled或rejected时，会执行相应的回调函数。

二、构建简单的Promise类

以下是一个简化版的Promise类实现：

function SimplePromise(executor) {
    var self = this;
    self.status = 'pending'; // 初始状态
    self.value = undefined; // 成功时的值
    self.reason = undefined; // 失败时的原因
    self.onFulfilledCallbacks = []; // 成功回调
    self.onRejectedCallbacks = []; // 失败回调
    function resolve(value) {
        if (self.status === 'pending') {
            self.status = 'fulfilled';
            self.value = value;
            self.onFulfilledCallbacks.forEach(function (callback) {
                callback(self.value);
            });
        }
    }
    function reject(reason) {
        if (self.status === 'pending') {
            self.status = 'rejected';
            self.reason = reason;
            self.onRejectedCallbacks.forEach(function (callback) {
                callback(self.reason);
            });
        }
    }
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
SimplePromise.prototype.then = function (onFulfilled, onRejected) {
    var self = this;
    if (self.status === 'fulfilled') {
        onFulfilled(self.value);
    } else if (self.status === 'rejected') {
        onRejected(self.reason);
    } else if (self.status === 'pending') {
        self.onFulfilledCallbacks.push(onFulfilled);
        self.onRejectedCallbacks.push(onRejected);
    }
};

三、使用示例

以下是如何使用这个简化版的Promise类：

var promise = new SimplePromise(function (resolve, reject) {
    setTimeout(function () {
        resolve('成功!');
    }, 1000);
});
promise.then(function (value) {
    console.log(value); // 输出 "成功!"
}, function (reason) {
    console.log(reason);
});

四、扩展Promise类功能

为了让Promise类更加完善，我们可以添加更多的功能，例如：

链式调用：允许then方法返回一个新的Promise，以实现链式调用。
catch方法：用于处理Promise中的错误。

以下是扩展后的Promise类：

SimplePromise.prototype.then = function (onFulfilled, onRejected) {
    var self = this;
    return new SimplePromise(function (resolve, reject) {
        if (self.status === 'fulfilled') {
            try {
                var result = onFulfilled(self.value);
                resolve(result);
            } catch (e) {
                reject(e);
            }
        } else if (self.status === 'rejected') {
            try {
                var result = onRejected(self.reason);
                resolve(result);
            } catch (e) {
                reject(e);
            }
        } else if (self.status === 'pending') {
            self.onFulfilledCallbacks.push(function (value) {
                try {
                    var result = onFulfilled(value);
                    resolve(result);
                } catch (e) {
                    reject(e);
                }
            });
            self.onRejectedCallbacks.push(function (reason) {
                try {
                    var result = onRejected(reason);
                    resolve(result);
                } catch (e) {
                    reject(e);
                }
            });
        }
    });
};
SimplePromise.prototype.catch = function (onRejected) {
    return this.then(null, onRejected);
};

五、使用扩展后的Promise类

以下是如何使用扩展后的Promise类：

var promise = new SimplePromise(function (resolve, reject) {
    setTimeout(function () {
        resolve('成功!');
    }, 1000);
});
promise
    .then(function (value) {
        console.log(value); // 输出 "成功!"
        return '下一步';
    })
    .then(function (value) {
        console.log(value); // 输出 "下一步"
    })
    .catch(function (reason) {
        console.log(reason);
    });

六、总结

通过手动编写一个简化版的Promise类，我们可以更好地理解Promise的内部机制和实现方式。在ES5中实现类似于Promise的功能，可以使用回调函数、事件监听器或手动编写一个简单的Promise类。手动编写Promise类不仅可以帮助我们理解Promise的核心概念，还可以在不支持ES6的环境中使用类似于Promise的功能。

使用回调函数、事件监听器、手动编写Promise类 是在ES5中实现Promise功能的主要方式。通过手动编写Promise类，我们可以实现状态管理、执行器函数和then方法等核心功能，并且可以扩展链式调用和错误处理等高级功能。这些方法和技巧可以帮助我们在ES5中实现类似于Promise的功能，提高代码的可读性和可维护性。