17370845950

Fetch 是 JavaScript 发起网络请求的现代标准，基于 Promise、语法简洁，但需手动处理 HTTP 错误和 Cookie；它不是 Ajax 的替代品，而是其思想在新标准下的升级实现。

Fetch API 是 JavaScript 中用于发起网络请求的现代标准方法，相比传统 Ajax（通常指 XMLHttpRequest），它更简洁、基于 Promise、更易读写，也更符合当前异步编程习惯。但它不是 Ajax 的“替代品”，而是 Ajax 思想在新标准下的实现升级。

Fetch 基本用法：发请求、取响应、读数据

Fetch 默认返回一个 Promise，解析成功后得到一个 Response 对象，需进一步调用其方法（如 .json()、.text()）才能读取响应体：

• GET 请求最简写法：fetch('/api/users')
• 带配置的 POST 请求：

  fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'admin', password: '123' })
  })

• 必须手动检查 HTTP 状态码：if (!res.ok) throw new Error(res.status)（Fetch 不会因 4xx/5xx 自动 reject）
• 响应体只能读一次，重复调用 .json() 会报错；如需多次使用，可先克隆：res.clone().json()

与传统 Ajax（XMLHttpRequest）的核心区别

不是功能增减，而是设计哲学和使用体验的差异：

• 异步模型不同：Ajax 依赖回调或手动封装 Promise；Fetch 天然返回 Promise，配合 async/await 更自然
• 错误处理逻辑不同：Ajax 在网络失败或超时时触发 onerror；Fetch 只在网络断开等极少数情况 reject，404、500 等仍返回 resolve 的 Response，需手动判断 res.ok
• 默认不带 Cookie：Fetch 默认不会发送 Cookie（同源也不发），需显式设置 credentials: 'include'；Ajax 默认同源会发
• 上传进度不可直接监听：Fetch 没有类似 xhr.upload.onprogress 的原生支持（需借助 ReadableStream 或第三方库）

什么时候该选 Fetch？什么时候回退 Ajax？

日常开发中优先用 Fetch，但注意这些实际限制：

• 需要精细控制上传进度 → 用 XMLHttpRequest 或封装 Fetch 流
• 项目需兼容 IE → 必须用 Ajax 或引入 Fetch Polyfill
• 已有大量基于回调的 Ajax 封装 → 不必强切，保持一致性更重要
• 需要自动携带凭证且逻辑简单 → Fetch 加 credentials: 'include' 即可，比 Ajax 设置 withCredentials = true 更直观

基本上就这些。Fetch 不是黑魔法，它让常见请求变简单，但也把一些隐含行为（比如错误判定、Cookie 策略）显式化了——理解这点，用起来就踏实。