前后端分离架构中的拦截器链设计与实践

红护

1. 请求响应拦截器链的核心价值

在前后端分离架构中，拦截器链就像交通枢纽的智能调度系统。我经历过一个电商项目，由于缺乏拦截器管理，代码里散落着大量重复的鉴权逻辑和日志打印，后来用拦截器链重构后，核心业务代码量减少了40%。这种设计模式本质上是通过责任链模式（Chain of Responsibility）实现的管道处理机制，每个拦截器都是管道中的一个处理器。

典型的应用场景包括：

权限校验（如JWT解析）
请求参数预处理
响应数据格式化
接口耗时统计
全局异常捕获

2. 拦截器链的实现架构

2.1 核心组件设计

一个健壮的拦截器链需要包含以下要素：

typescript复制interface Interceptor {
  preHandle(request: Request): Request | Promise<Request>;
  postHandle(response: Response): Response | Promise<Response>;
  errorHandler(error: Error): Error | Promise<Error>;
}

class InterceptorChain {
  private interceptors: Interceptor[] = [];
  
  addInterceptor(interceptor: Interceptor) {
    this.interceptors.push(interceptor);
  }
  
  async execute(request: Request) {
    let currentRequest = request;
    // 请求预处理
    for (const interceptor of this.interceptors) {
      currentRequest = await interceptor.preHandle(currentRequest);
    }
    
    let response: Response;
    try {
      response = await fetch(currentRequest);
      // 响应后处理
      for (const interceptor of [...this.interceptors].reverse()) {
        response = await interceptor.postHandle(response);
      }
      return response;
    } catch (error) {
      // 异常处理
      for (const interceptor of [...this.interceptors].reverse()) {
        error = await interceptor.errorHandler(error);
      }
      throw error;
    }
  }
}

2.2 执行顺序控制

拦截器的执行顺序遵循"先进后出"原则：

请求阶段：按注册顺序执行preHandle
响应阶段：按注册逆序执行postHandle
异常阶段：按注册逆序执行errorHandler

这种设计确保了：

最早注册的拦截器最先处理原始请求
最晚注册的拦截器最先处理最终响应
异常处理与响应处理保持对称

3. 实战中的高级应用技巧

3.1 性能监控拦截器实现

typescript复制class PerformanceInterceptor implements Interceptor {
  private timers = new WeakMap<Request, number>();
  
  preHandle(request: Request) {
    this.timers.set(request, performance.now());
    return request;
  }
  
  postHandle(response: Response) {
    const duration = performance.now() - this.timers.get(response.request);
    console.log(`[${response.url}] 耗时: ${duration.toFixed(2)}ms`);
    return response;
  }
}

3.2 智能重试拦截器

typescript复制class RetryInterceptor implements Interceptor {
  constructor(private maxRetries = 3) {}
  
  async errorHandler(error: Error) {
    if (this.shouldRetry(error)) {
      return this.retryRequest(error.request);
    }
    throw error;
  }
  
  private async retryRequest(request: Request) {
    for (let i = 0; i < this.maxRetries; i++) {
      try {
        return await fetch(request);
      } catch (retryError) {
        if (i === this.maxRetries - 1) throw retryError;
        await this.delay(1000 * (i + 1));
      }
    }
  }
}

4. 生产环境中的避坑指南

4.1 内存泄漏防护

特别注意：拦截器中引用外部变量时务必使用WeakMap而非普通Map，防止请求对象无法被GC回收

4.2 执行顺序陷阱

常见错误场景：

A拦截器依赖B拦截器的处理结果，但注册顺序错误
后置处理器修改了前置处理器需要的元数据

解决方案：

使用依赖注入声明拦截器间依赖
通过context对象传递元数据

4.3 异步处理最佳实践

typescript复制// 错误示例：未处理异步拒绝
interceptors.forEach(interceptor => {
  interceptor.preHandle(request); // 可能丢失异常
});

// 正确示例：使用reduce链式处理
await interceptors.reduce(
  (promise, interceptor) => promise.then(req => interceptor.preHandle(req)),
  Promise.resolve(request)
);

5. 架构演进方向

5.1 动态拦截器加载

typescript复制// 根据请求特征动态加载拦截器
function createDynamicChain(request) {
  const chain = new InterceptorChain();
  
  if (request.url.includes('/api/')) {
    chain.addInterceptor(new AuthInterceptor());
  }
  
  if (request.headers.get('X-Request-Metrics')) {
    chain.addInterceptor(new MetricsInterceptor());
  }
  
  return chain;
}

5.2 微前端场景下的组合式拦截

在主应用和子应用各自维护拦截器链的基础上，通过Proxy模式实现层级调用：

typescript复制class FederatedInterceptorChain {
  constructor(private parent: InterceptorChain, private child: InterceptorChain) {}
  
  async execute(request) {
    // 先执行父级preHandle
    let processed = await parent.execute(request);
    // 再执行子级处理
    return child.execute(processed);
  }
}