javascript Fetch API怎么用_它与传统的Ajax有何不同？

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')<br>  .then(res => res.json())<br>  .then(data => console.log(data));

登录后复制

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

fetch('/api/login', {<br>  method: 'POST',<br>  headers: { 'Content-Type': 'application/json' },<br>  body: JSON.stringify({ username: 'alice', password: '123' })<br})<br>  .then(res => res.json())<br>  .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：

标签： vue react javascript word java jquery js json ajax cookie 浏览