javascript的Fetch_API是什么_比AJAX好在哪里_技术教程

Fetch API 是现代替代 XMLHttpRequest 的标准化方案，需手动检查 response.ok 处理 HTTP 错误、显式设置 credentials 传递 Cookie、用 AbortController 取消请求，所有行为均显式化。

Fetch API 是浏览器原生提供的、基于 Promise 的网络请求接口，它不是“比 AJAX 好”，而是现代替代 XMLHttpRequest（即传统 AJAX）的标准化方案；它更简洁、更符合当前 JS 生态，但默认行为和错误处理逻辑与你习惯的 jQuery.ajax 或封装过的 AJAX 工具不同——这点最容易踩坑。

Fetch 不会自动 reject 网络错误以外的 HTTP 状态码

这是最常被忽略的区别。用 fetch() 请求一个 404 或 500 接口时，then() 仍会执行，因为只要网络通、响应头收到，Promise 就算“成功”。而老式 XMLHttpRequest 或 jQuery.ajax 默认把 4xx/5xx 当作 error 触发失败回调。

实操建议：

必须手动检查 response.ok（等价于 response.status >= 200 && response.status ）
不要只依赖 catch() 捕获 HTTP 错误
如果需要类 jQuery 行为，得自己封装一层

fetch('/api/user')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败：', err));

Fetch 默认不带 Cookie，AJAX（XMLHttpRequest）默认带

在跨域或同域请求中，fetch() 默认不会发送 Cookie 和认证头，而 XMLHttpRequest 在同域下默认携带 Cookie，这也是登录态突然失效的常见原因。

实操建议：

需要传 Cookie 时，显式设置 credentials: 'include'
若只在同域用，可设为 'same-origin'（更安全）
设为 'omit' 则完全不带（默认值）
注意：服务端需配合设置 Access-Control-Allow-Credentials: true，且不能用 Access-Control-Allow-Origin: *

fetch('/api/profile', {
  credentials: 'include'
});

Fetch 没有 progress 事件和 abort 旧语法，但支持 AbortController

传统 XMLHttpRequest 支持 upload.onprogress、download.onprogress，也支持直接调用 xhr.abort()。Fetch 没有内置 progress 回调，且取消请求必须用 AbortController —— 这是现代标准，但写法稍多一步。

实操建议：

上传进度需靠 ReadableStream + tee() 手动读取（较复杂，一般用第三方库如 axios 或自定义流处理）
取消请求务必创建 AbortController 实例，并传入 signal 选项
调用 controller.abort() 后，fetch Promise 会以 AbortError 被 reject

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  signal: controller.signal,
  body: formData
}).catch(err => {
  if (err.name === 'AbortError') {
    console.log('请求已被取消');
  }
});

// 取消（例如用户点了“停止”按钮）
controller.abort();