24 | 行为型：通过观察者、迭代器模式看JS异步回调

在JavaScript的广阔世界里，异步编程是不可或缺的一部分，它让JavaScript能够处理耗时的操作（如网络请求、文件读写等）而不阻塞主线程，从而保持应用的响应性和流畅性。然而，异步编程也带来了其特有的挑战，如回调地狱（Callback Hell）、状态管理复杂等问题。幸运的是，设计模式——尤其是行为型模式中的观察者（Observer）和迭代器（Iterator）模式，为我们提供了一种优雅地处理异步回调和复杂状态管理的方式。本章节将深入探讨这两种模式在JavaScript异步编程中的应用。

一、观察者模式与异步事件处理

观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时，会通知所有观察者对象，使它们能够自动更新自己。在JavaScript中，这种机制广泛应用于事件监听和异步回调处理中。

1.1 JavaScript中的事件监听

JavaScript的事件监听机制本质上就是观察者模式的一种实现。当我们在DOM元素上添加事件监听器时，实际上是让该元素（主题对象）在特定事件发生时，通知所有注册了该事件的回调函数（观察者）。例如：

const button = document.getElementById('myButton');
// 定义观察者函数
function onClickHandler() {
    console.log('Button was clicked!');
}
// 注册观察者
button.addEventListener('click', onClickHandler);
// 当按钮被点击时，主题对象（button）通知所有观察者（包括onClickHandler）

1.2 自定义观察者模式实现异步回调

除了DOM事件，我们还可以在JavaScript中自定义实现观察者模式来处理异步回调。例如，创建一个消息中心，用于管理不同组件间的通信：

class MessageCenter {
    constructor() {
        this.observers = {};
    }
    subscribe(eventType, callback) {
        if (!this.observers[eventType]) {
            this.observers[eventType] = [];
        }
        this.observers[eventType].push(callback);
    }
    unsubscribe(eventType, callback) {
        if (this.observers[eventType]) {
            this.observers[eventType] = this.observers[eventType].filter(obs => obs !== callback);
        }
    }
    notify(eventType, ...args) {
        if (this.observers[eventType]) {
            this.observers[eventType].forEach(obs => obs(...args));
        }
    }
}
// 使用示例
const messageCenter = new MessageCenter();
function handleMessage(message) {
    console.log(`Received message: ${message}`);
}
messageCenter.subscribe('newMessage', handleMessage);
// 假设在某个异步操作中
setTimeout(() => {
    messageCenter.notify('newMessage', 'Hello, World!');
}, 1000);

二、迭代器模式与异步数据处理

迭代器模式是一种行为型设计模式，它提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示。在JavaScript中，迭代器模式通常与for...of循环、Symbol.iterator等特性结合使用，以支持对集合的遍历。然而，迭代器模式在异步数据处理中同样有着独特的应用场景，尤其是在处理异步流（如异步生成器）时。

2.1 异步迭代器与for...await...of

ES2018引入了异步迭代器（Async Iterator）和for...await...of循环，允许我们以同步的方式编写异步遍历逻辑。异步迭代器是遵循迭代器协议的对象，但它返回的是Promise对象，而不是直接的值。

async function* asyncGenerator() {
    const urls = ['https://api.example.com/data1', 'https://api.example.com/data2'];
    for (const url of urls) {
        const response = await fetch(url);
        const data = await response.json();
        yield data; // 产出Promise解析后的数据
    }
}
async function processData() {
    for await (const data of asyncGenerator()) {
        console.log(data); // 同步风格处理异步数据
    }
}
processData();

在这个例子中，asyncGenerator是一个异步生成器函数，它逐个请求URL并产出JSON数据。processData函数则使用for...await...of循环来遍历这些数据，以同步的方式处理每个异步请求的结果。

2.2 自定义异步迭代器处理复杂异步流

除了使用内置的异步生成器，我们还可以自定义异步迭代器来处理更复杂的异步流。例如，实现一个能够自动重试失败的请求的异步迭代器：

async function* retryIterator(urls, maxRetries = 3) {
    for (const url of urls) {
        let retries = 0;
        while (retries < maxRetries) {
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                const data = await response.json();
                yield data;
                break; // 成功获取数据后跳出循环
            } catch (error) {
                retries++;
                console.error(`Failed to fetch ${url}, retrying... (${retries}/${maxRetries})`);
                if (retries >= maxRetries) {
                    throw error; // 达到最大重试次数后抛出错误
                }
                await new Promise(resolve => setTimeout(resolve, 1000)); // 等待一秒后重试
            }
        }
    }
}
// 使用自定义异步迭代器
async function processDataWithRetries() {
    for await (const data of retryIterator(['https://api.example.com/unstable'])) {
        console.log(data);
    }
}
processDataWithRetries().catch(console.error);

在这个例子中，retryIterator是一个自定义的异步迭代器，它会对每个URL进行多次尝试，直到成功获取数据或达到最大重试次数。这种机制在处理可能不稳定的API或网络请求时非常有用。

总结

通过本章节的探讨，我们看到了观察者模式和迭代器模式在JavaScript异步编程中的强大应用。观察者模式让我们能够以松耦合的方式处理异步事件和回调，而迭代器模式（特别是异步迭代器）则提供了一种优雅的方式来遍历和处理异步数据流。这些设计模式不仅提高了代码的可读性和可维护性，还使得异步编程变得更加直观和易于管理。在未来的JavaScript开发中，深入理解和灵活运用这些设计模式，将有助于我们编写出更加高效、健壮和可扩展的异步代码。