17370845950

Fetch API 是现代浏览器原生网络请求接口，基于 Promise 设计，支持 async/await，但默认不带 Cookie、不自动处理 4xx/5xx 状态码；需手动检查 res.ok、显式配置 credentials、用 AbortController 取消请求。

Fetch API 是现代浏览器提供的原生网络请求接口，用 Promise 封装 HTTP 请求，语法更简洁、逻辑更清晰；它不是 XMLHttpRequest（XHR）的简单包装，而是一套全新设计的底层协议抽象，天然支持 async/await，但默认不带 Cookie、不自动处理 4xx/5xx 状态码，这点和传统 Ajax 有关键区别。

基本用法：从 GET 到 POST 很直接

发起一个 GET 请求只需一行核心代码：

fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data));

POST 请求需显式配置 method、headers 和 body：

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'alice', password: '123' })  .then(res => res.json())
  .then(data => console.log(data));

• 响应体（res.body）是 ReadableStream，必须调用 res.json()、res.text() 或 res.blob() 才能读取内容
• fetch 返回的 Promise 只在网络错误（如断网、DNS 失败）时 reject，HTTP 状态码 404、500 不会触发 catch
• 如需根据状态码判断失败，要手动检查 res.ok（即 status 在 200–299）

Cookie 和认证行为默认不同

传统 XHR 默认发送当前域 Cookie（withCredentials=false），而 fetch 默认完全忽略 Cookie：

• 要携带 Cookie，必须显式传入 { credentials: 'include' }
• 若只在同域下需要 Cookie，用 'same-origin' 更安全
• 跨域请求带 Cookie 时，服务端响应头必须包含 Access-Control-Allow-Credentials: true，且不能设 Access-Control-Allow-Origin: *

取消请求：Fetch 本身不支持，需靠 AbortController

XMLHttpRequest 可直接调用 xhr.abort()，而 fetch 没有内置 abort 方法：

• 借助 AbortController 实现超时或手动取消：

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

fetch('/api/data', { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') console.log('请求被取消');
  });

• React/Vue 等框架中，通常在组件卸载时调用 controller.abort() 防止内存泄漏
• 注意：已 resolve 的 Promise 不会因 abort 而 reject，仅未完成的请求会被中断

错误处理逻辑更“诚实”，但也更需手动干预

fetch 的 Promise 不因 HTTP 错误状态码 reject，这是与 jQuery.ajax 或封装过的 Axios 最明显的体验差异：

• 401、404、500 响应仍走 .then()，需主动判断 !res.ok
• 常见写法是封装一层工具函数：

async function api(url, options = {}) {
  const res = await fetch(url, options);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

• 网络异常（如离线）才会进 catch，所以建议同时监听 res.ok 和网络级错误