javascript Fetch API怎么用_它与传统的Ajax有何不同？-js教程-PHP中文网

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

狼影

发布： 2025-12-19 21:10:07

原创

493人浏览过

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

javascript fetch api怎么用_它与传统的ajax有何不同？

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：

Chatbase

从你的知识库中构建一个AI聊天机器人

117

查看详情

立即学习“Java免费学习笔记（深入）”；

要携带 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();<br>setTimeout(() => controller.abort(), 5000);<br><br>fetch('/api/data', { signal: controller.signal })<br>  .catch(err => {<br>    if (err.name === 'AbortError') console.log('请求被取消');<br>  });

登录后复制

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 = {}) {<br>  const res = await fetch(url, options);<br>  if (!res.ok) throw new Error(`HTTP ${res.status}`);<br>  return res.json();<br>}

登录后复制