Fetch API 是现代 JavaScript 发起网络请求的标准方式，基于 Promise、语法简洁；默认不带 Cookie，需注意 CORS 限制与 credentials 配置；HTTP 错误码需手动检查 response.ok；支持 JSON/文本/二进制响应解析；POST 需显式设置 method、headers 和 body；跨域依赖 mode 与服务端响应头；超时需用 AbortController 实现。
Fetch API 是现代 JavaScript 中发起网络请求的标准方式，相比传统的 XMLHttpRequest 更简洁、更易用，且原生支持 Promise，便于配合 async/await 使用。它默认不携带 Cookie，对跨域请求有明确的限制和配置要求，正确理解和使用这些特性是开发中避免“CORS 错误”的关键。
基础 GET 请求与响应处理
最简单的 fetch 调用只需传入 URL，它返回一个 Promise，解析后得到 Response 对象：
注意：fetch 只在遇到网络故障（如断网、DNS 失败）时才 reject；HTTP 状态码如 404、500 属于“成功响应”，需手动检查 response.ok 或 response.status。
- 用 response.json() 解析 JSON 数据（自动调用 response.text() 再 JSON.parse）
- 用 response.text() 获取纯文本内容
- 用 response.blob() 或 response.arrayBuffer() 处理二进制资源
发送 POST 请求并携带数据
POST 请求需显式指定 method、headers 和 body。常见组合如下：
立即学习“Java免费学习笔记（深入）”；
- 提交 JSON 数据：设置 Content-Type: application/json，body 为 JSON.stringify(data)
- 提交表单数据：使用 FormData 实例（自动设置正确 Content-Type，无需手动设 headers）
- 提交 URL 编码数据：body 为 new URLSearchParams(data)，headers 可设 Content-Type: application/x-www-form-urlencoded
处理跨域请求（CORS）
浏览器默认阻止跨域请求，除非服务端明确允许。fetch 的 mode 选项控制这一行为：
- mode: 'cors'（默认）：遵循 CORS 协议。请求会先发预检（OPTIONS），服务端必须返回 Access-Control-Allow-Origin 等响应头
- mode: 'no-cors'：跳过 CORS 检查，但只能用于简单请求（GET/HEAD/POST + 简单 header），且响应为 opaque 类型（无法读取 status、headers、body）
- mode: 'same-origin'：只允许同源请求，跨域直接报错
若需携带 Cookie 或认证信息（如 session），还需同时设置 credentials: 'include'，且服务端必须返回 Access-Control-Allow-Credentials: true（此时 Access-Control-Allow-Origin 不能为 *）。
错误处理与超时控制
fetch 不因 HTTP 状态码而 reject，因此推荐封装一层统一处理逻辑：
- 检查 !response.ok 并 throw 新错误，便于 catch 捕获
- 超时需手动实现：用 AbortController 配合 signal 选项，在指定时间后调用 controller.abort()
- 网络异常（如离线）会触发 fetch 返回的 Promise reject，可直接在 catch 中捕获
