6.装饰者模式

约 270 字小于 1 分钟

2026-02-27

装饰者模式（Decorator Pattern）的主要目的是：不修改原对象代码的前提下，通过 "包裹对象" 动态叠加能力

适合使用装饰者模式的场景

HTTP 请求链路增强。如日志、鉴权、重试、超时等
表单提交增强。如额外叠加防抖、节流、埋点上报
方法级监控。如给关键函数加耗时统计、调用计数、异常上报，不侵入核心逻辑

类型定义与基础实现

interface HttpClient {
    request(url: string): Promise<string>;
}

class BaseClient implements HttpClient {
    async request(url: string): Promise<string> {
        return `response from ${url}`;
    }
}

装饰者实现

class LogDecorator implements HttpClient {
    constructor(private client: HttpClient) {}

    async request(url: string): Promise<string> {
        console.time(`request:${url}`);
        const result = await this.client.request(url);
        console.timeEnd(`request:${url}`);
        return result;
    }
}

class RetryDecorator implements HttpClient {
    constructor(
        private client: HttpClient,
        private retries = 2,
    ) {}

    async request(url: string): Promise<string> {
        let lastError: unknown;
        for (let i = 0; i <= this.retries; i++) {
            try {
                return await this.client.request(url);
            } catch (error) {
                lastError = error;
            }
        }
        throw lastError;
    }
}

使用示例

const client = new RetryDecorator(
    new LogDecorator(new BaseClient()),
    3,
);

client.request("/api/user").then((result) => {
    console.log("请求结果:", result);
});