100 行代码实现 Promises/A+ 规范——让异步编程不再是难题

2024-02-07 07:14:04

在编写前端应用时，掌握异步编程至关重要。Promises 是一种处理异步操作的方式，它提供了一种更加直观和统一的方式来管理异步代码流。遵循 Promises/A+ 规范的 Promise 实现不仅能让代码更简洁，还能更好地避免回调地狱问题。

为什么选择实现 Promises/A+

实现符合 Promises/A+ 规范的 Promise 是一种深入理解异步编程机制的有效方法。通过这种方式可以掌握如何使用 Promise 管理异步任务流，并且能够构建自己的工具库来处理各种异步场景。

实现原理概述

Promises/A+ 规范定义了一个通用的接口，用于以可预测的方式处理异步操作的结果。它包括了几个核心概念：状态（pending, fulfilled, rejected）、方法（then）和一个返回值（value）。基于这些规则，可以创建出灵活且强大的异步编程模型。

100 行代码实现 Promises/A+

下面是一个简化版的 Promise 实现，大约需要100行代码。这个版本虽然没有完全覆盖所有边缘案例，但能够帮助理解核心机制：

class MyPromise {
    constructor(executor) {
        this.state = 'pending';
        this.value = undefined;
        this.onFulfilledCallbacks = [];
        this.onRejectedCallbacks = [];

        const resolve = (value) => {
            if (this.state === 'pending') {
                setTimeout(() => {
                    this.state = 'fulfilled';
                    this.value = value;
                    this.onFulfilledCallbacks.forEach(fn => fn(value));
                });
            }
        };

        const reject = (reason) => {
            if (this.state === 'pending') {
                setTimeout(() => {
                    this.state = 'rejected';
                    this.value = reason;
                    this.onRejectedCallbacks.forEach(fn => fn(reason));
                });
            }
        };

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

    then(onFulfilled, onRejected) {
        return new MyPromise((resolve, reject) => {
            const handleValue = () => {
                if (this.state === 'fulfilled') {
                    try {
                        const result = onFulfilled(this.value);
                        resolve(result);
                    } catch (error) {
                        reject(error);
                    }
                } else if (this.state === 'rejected') {
                    try {
                        const result = onRejected(this.value);
                        resolve(result);
                    } catch (error) {
                        reject(error);
                    }
                }
            };

            this.onFulfilledCallbacks.push(() => handleValue());
            this.onRejectedCallbacks.push(() => handleValue());

            if (this.state !== 'pending') {
                setTimeout(handleValue);
            }
        });
    }
}

使用示例

使用这个简化版的 Promise 实现，可以构建异步操作：

const fetchData = new MyPromise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/data');
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send();
});

fetchData.then(data => console.log('Received:', data)).catch(error => console.error('Error:', error));