fetch是现代浏览器发起网络请求的标准方式，基于Promise支持async/await；需调用.json()等方法解析Response；HTTP错误需手动检查res.ok；发送Cookie需设置credentials选项。

JavaScript 的 fetch 是现代浏览器中发起网络请求的标准方式，比传统的 XMLHttpRequest 更简洁、更易用，且基于 Promise，天然支持 async/await。

基本用法：GET 请求获取数据

最常见的是用 GET 方法请求 JSON 数据，比如从公开 API 获取用户列表：

• 调用 fetch(url) 返回一个 Promise，它解析为 Response 对象
• Response 不是最终数据，需调用 .json()、.text() 等方法读取响应体
• 每个读取方法也返回 Promise，所以通常要链式调用或用 await

示例：

async function getUser() {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const user = await res.json(); // 注意：.json() 必须调用，否则得不到对象
    console.log(user.name); // "Leanne Graham"
  } catch (err) {
    console.error('请求失败:', err.message);
  }
}

发送 POST 请求并提交 JSON 数据

向服务器提交数据时，需要设置请求头和请求体：

• 设置 headers：指定 'Content-Type': 'application/json'
• 使用 body: JSON.stringify(data) 发送序列化后的 JSON
• 方法默认是 GET，POST 需显式写 method: 'POST'

示例：

async function createUser(name, email) {
  const res = await fetch('https://jsonplaceholder.typicode.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name, email, username: name.toLowerCase() })
  });
  return res.json();
}

处理错误与状态码

fetch 只在网络完全失败（如断网、域名错误）时才 reject，**HTTP 错误状态（如 404、500）不会触发 catch**，需手动检查：

• 用 res.ok 判断是否为 200–299 范围的状态码
• 用 res.status 获取具体状态码，做精细化处理（如 401 跳登录页）
• 注意：一旦调用 res.json() 等方法，响应体只能读一次，不可重复使用

带凭证（如 Cookie）的请求

默认情况下，fetch 不发送 Cookie，跨域也不会携带认证信息。如需发送，加 credentials 选项：

• credentials: 'same-origin'：同源请求自动带 Cookie（默认值）
• credentials: 'include'：始终发送 Cookie（含跨域），后端需允许（CORS 响应头含 Access-Control-Allow-Credentials: true）
• credentials: 'omit'：从不发送（等价于不设该字段）

示例（登录后请求用户信息）：

const res = await fetch('/api/profile', {
  credentials: 'include' // 让浏览器带上 session cookie
});