javascript Fetch API是什么_它比传统的AJAX有什么优势？

Fetch API 是浏览器原生的现代网络请求接口，替代 XMLHttpRequest，基于 Promise 支持 async/await、语法简洁、可细粒度控制请求响应，但 404/500 不自动 reject，需手动检查 response.ok。

Fetch API 是浏览器原生提供的、用于发起网络请求的现代 JavaScript 接口。它不是第三方库，而是标准 Web API 的一部分，直接挂载在 window 对象上（即全局可用的 fetch() 函数）。它的核心目标是替代老旧的 XMLHttpRequest（XHR），用更符合现代语言特性的设计来处理 HTTP 请求与响应。

Fetch 基于 Promise，写法更自然

传统 AJAX 使用 XHR 时依赖事件回调（如 onreadystatechange），嵌套深、逻辑分散，容易陷入“回调地狱”。而 Fetch 返回一个 Promise，天然支持链式调用和 async/await：

• fetch(url).then(res => res.json()).then(data => ...)
• const data = await (await fetch(url)).json();

代码线性清晰，错误可统一用 .catch() 或 try/catch 捕获，维护成本明显降低。

语法简洁，配置更语义化

Fetch 的参数结构直观：第一个参数是 URL，第二个是配置对象（method、headers、body 等），无需手动设置请求头或拼接查询字符串：

• GET 请求只需 fetch('/api/users')
• POST 提交 JSON 数据，只需指定 Content-Type 和序列化 body
• 支持 PUT、PATCH、DELETE 等全部 HTTP 方法，无需额外封装

功能更细、扩展性更强

Fetch 不仅能发请求，还提供了对 Request/Response 对象的完整控制能力：

• 可读取流式响应（response.body.getReader()），适合大文件或实时数据
• 原生支持 AbortController，轻松取消进行中的请求
• 可在 Service Worker 中拦截、修改甚至伪造 fetch 请求，支撑离线优先等高级场景
• 自动处理重定向（默认跟随），也可通过 redirect: 'manual' 手动控制

注意一个常见误区：404/500 不会自动报错

Fetch 只在网络异常（如断网、DNS 失败）时 reject Promise；HTTP 错误状态码（如 404、500）仍会进入 then。必须手动检查 response.ok 或 response.status 才能区分业务失败和网络失败：

✅ 正确做法：
fetch('/api/data').then(res => { if (!res.ok) throw new Error(res.status); return res.json(); })