关注分离（Separation of Concerns）在前端开发中的实践演进：从 XMLHttpRe ...

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

一、关注分离的焦点价值

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

1. const xhr = new XMLHttpRequest();
2. xhr.open('GET', '/api/data');
4. xhr.onreadystatechange = function() {
5.   if (xhr.readyState === 4) {
6.     if (xhr.status === 200) {
7.       try {
8.         const data = JSON.parse(xhr.responseText);
9.         // 业务逻辑处理
10.       } catch (e) {
11.         console.error('解析失败', e);
12.       }
13.     } else {
14.       console.error('请求失败:', xhr.status);
15.     }
16.   }
17. };
19. xhr.onerror = function() {
20.   console.error('网络错误');
21. };
23. xhr.send();

复制代码

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

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

三、Fetch API 的架构解耦

1. fetch('/api/data')
2.   .then(response => {
3.     if (!response.ok) throw new Error(response.statusText);
4.     return response.json();
5.   })
6.   .then(data => {
7.     // 业务逻辑处理
8.   })
9.   .catch(error => {
10.     console.error('请求异常:', error);
11.   });

复制代码

Fetch 通过分层计划实现了三个关键解耦：
3.1 协议层解耦

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

3.2 数据处理解耦

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

3.3 错误处理同一

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

四、关注分离的进阶实践

4.1 拦截器封装

1. const createFetchWithInterceptor = () => {
2.   const interceptors = [];
3.   
4.   return (url, options) => {
5.     let chain = Promise.resolve({ url, options });
6.    
7.     interceptors.forEach(({ request, response }) => {
8.       if (request) chain = chain.then(args => request(args));
9.       if (response) chain = chain.then(res => response(res));
10.     });
11.    
12.     return chain.then(args => fetch(args.url, args.options));
13.   };
14. };

复制代码

4.2 业务层抽象

1. class ApiClient {
2.   constructor(baseURL) {
3.     this.baseURL = baseURL;
4.   }
6.   async get(endpoint) {
7.     const response = await fetch(`${this.baseURL}${endpoint}`);
8.     return this._handleResponse(response);
9.   }
11.   async _handleResponse(response) {
12.     if (!response.ok) throw new ApiError(response.status);
13.     const contentType = response.headers.get('content-type');
14.     return contentType.includes('json') ? response.json() : response.text();
15.   }
16. }

复制代码

五、计划原则的延伸思考

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

六、总结

从 XHR 到 Fetch 的演进证明，良好的架构计划应遵循以下原则：

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。