XMLHttpRequest (XHR) 的现代替代方案

主要替代方案列表

1. Fetch API

• ‌特点‌：

• 基于Promise的现代化API设计

• 更简洁的语法结构

• 原生支持流式数据处理

• 自动处理简单的CORS请求

• ‌优势‌：

• 符合职责分离原则

• 与async/await完美配合

• 内置JSON解析功能

• ‌局限性‌：

• 默认不会拒绝HTTP错误状态(404/500等)

• 不支持请求取消(需使用AbortController)

• 进度监控不如XHR完善

2. Axios

• ‌特点‌：

• 基于Promise的HTTP客户端

• 同时支持浏览器和Node.js环境

• 自动转换JSON数据

• 提供请求/响应拦截器

• ‌优势‌：

• 完善的错误处理机制

• 支持请求取消

• 内置XSRF防御

• 更丰富的配置选项

• ‌局限性‌：

• 需要额外引入库

• 相比Fetch API体积更大

3. GraphQL客户端(Apollo/Relay)

• ‌特点‌：

• 基于GraphQL查询语言

• 精确获取所需数据

• 单一端点处理所有请求

• 强大的类型系统

• ‌优势‌：

• 减少网络请求次数

• 避免数据过度获取

• 前端驱动数据需求

• ‌局限性‌：

• 需要后端支持GraphQL

• 学习曲线较陡

功能对比表

特性	XHR	Fetch API	Axios	GraphQL
Promise支持	不支持	支持	支持	支持
请求取消	支持	需扩展	支持	支持
进度监控	完善	有限	完善	有限
拦截器	不支持	不支持	支持	支持
自动JSON转换	不支持	支持	支持	支持
跨域处理	需配置	自动	自动	自动
浏览器支持	广泛	现代	广泛	现代
体积大小	原生	原生	较大	较大

迁移建议

1. ‌简单项目‌：优先考虑Fetch API，减少依赖

2. ‌企业级应用‌：推荐Axios，功能更全面

3. ‌数据密集型应用‌：考虑GraphQL方案

4. ‌兼容旧浏览器‌：仍需要XHR或Axios

代码示例对比

Fetch API基本用法

fetch('https://api.example.com/data')
  .then(response => {
    if(!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios基本用法

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

这两种现代方案都比传统XHR代码更简洁易读。