关注分离（Separation of Concerns）在前端开发中的实践演进：从 XMLHttpRequest 到 Fetch API

关注分离（Separation of Concerns）在前端开发中的实践演进：从 XMLHttpRequest 到 Fetch API

一、关注分离的核心价值

关注分离（SoC）是软件工程领域的重要设计原则，强调将系统分解为不同维度的功能模块，每个模块只负责单一职责。这一思想在前端领域的演进历程中，最典型的案例莫过于网络请求方式的迭代：从 XMLHttpRequest 到 Fetch API 的演变，清晰地展现了 SoC 原则如何推动技术架构的优化。

二、XMLHttpRequest 时代的关注耦合

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      try {
        const data = JSON.parse(xhr.responseText);
        // 业务逻辑处理
      } catch (e) {
        console.error('解析失败', e);
      }
    } else {
      console.error('请求失败:', xhr.status);
    }
  }
};

xhr.onerror = function() {
  console.error('网络错误');
};

xhr.send();

这段经典代码暴露了 XHR 架构的三大问题：

1. 生命周期耦合：readyState 管理贯穿整个请求周期
2. 异常处理分散：状态码校验、解析错误、网络错误分散在不同位置
3. 数据处理侵入：响应解析与业务逻辑深度耦合

三、Fetch API 的架构解耦

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error(response.statusText);
    return response.json();
  })
  .then(data => {
    // 业务逻辑处理
  })
  .catch(error => {
    console.error('请求异常:', error);
  });

Fetch 通过分层设计实现了三个关键解耦：

3.1 协议层解耦

• 使用 Promise 链式调用分离请求发起、响应接收、数据处理阶段
• 每个 then 方法对应一个独立处理阶段

3.2 数据处理解耦

• 通过 body mixin 提供多种解析方法（json(), text(), blob()）
• 业务层按需选择解析方式，不侵入网络层

3.3 错误处理统一

• 网络故障自动触发 reject
• HTTP 错误状态通过 response.ok 显式判断
• 统一 catch 块处理所有异常场景

四、关注分离的进阶实践

4.1 拦截器封装

const createFetchWithInterceptor = () => {
  const interceptors = [];
  
  return (url, options) => {
    let chain = Promise.resolve({ url, options });
    
    interceptors.forEach(({ request, response }) => {
      if (request) chain = chain.then(args => request(args));
      if (response) chain = chain.then(res => response(res));
    });
    
    return chain.then(args => fetch(args.url, args.options));
  };
};

4.2 业务层抽象

class ApiClient {
  constructor(baseURL) {
    this.baseURL = baseURL;
  }

  async get(endpoint) {
    const response = await fetch(`${this.baseURL}${endpoint}`);
    return this._handleResponse(response);
  }

  async _handleResponse(response) {
    if (!response.ok) throw new ApiError(response.status);
    const contentType = response.headers.get('content-type');
    return contentType.includes('json') ? response.json() : response.text();
  }
}

五、设计原则的延伸思考

1. 可测试性增强：分离网络模块后，可单独 mock 请求进行单元测试
2. 可维护性提升：修改响应解析逻辑不会影响请求发送过程
3. 扩展性优化：通过中间件机制可灵活添加缓存、日志等功能
4. 生态统一：基于 Promise 的设计天然支持 async/await 语法

六、总结

从 XHR 到 Fetch 的演进证明，优秀的架构设计应遵循以下原则：

• 网络协议处理与业务逻辑分离
• 数据处理流程分层明确
• 异常处理路径集中统一
• 扩展机制开放灵活

在现代前端开发中，无论是 React 的 Hooks 设计还是 Vue 的 Composition API，都延续了关注分离的设计哲学。开发者应深入理解这一原则，在构建复杂应用时设计出更清晰、更健壮的代码架构。