Chrome的Fetch/XHR是什么？

Januea2026-04-18 12:39

"Fetch / XHR "指的其实是：

👉 浏览器向服务器发请求的两种方式

一、先讲结论

名称	全称	本质
XHR	XMLHttpRequest	老一代请求方式
Fetch	Fetch API	新一代请求方式

👉 在浏览器 DevTools 里看到的：

text 复制代码

Fetch/XHR

意思是：

👉 所有"接口请求（AJAX请求）"都归类在这里

二、XHR 是什么（老方法）

👉 全称：XMLHttpRequest

示例：

javascript 复制代码

var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/test");
xhr.send();

特点：

写法繁琐 ❌
回调地狱 ❌
老项目常见（Vue2 / jQuery）

三、Fetch 是什么（新方法）

👉 现代浏览器推荐方式

示例：

javascript 复制代码

fetch("/api/test")
  .then(res => res.json())
  .then(data => console.log(data));

特点：

基于 Promise ✅
写法更优雅 ✅
支持 async/await ✅

javascript 复制代码

const res = await fetch("/api/test");
const data = await res.json();

四、在 Vue 项目里实际用的是啥？

很可能在用：

👉 axios

javascript 复制代码

axios.get("/api/test");

👉 其实底层是：

text 复制代码

axios → 封装了 XHR（浏览器环境）

五、为什么 DevTools 显示 "Fetch/XHR"

在 Chrome 网络面板：

text 复制代码

Fetch/XHR

👉 这个分类包含：

fetch 请求
XMLHttpRequest 请求
axios 请求（因为基于 XHR）

六、和开发有什么关系？

结合现在在做接口联调 👇

1️⃣ 调用后端接口（Q001~Q005）

javascript 复制代码

axios.post("/api/q003", data)

👉 这就是一个：

text 复制代码

Fetch/XHR 请求

2️⃣ 如果接口报错

要看：

👉 浏览器 → Network → Fetch/XHR

可以看到：

请求参数
返回结果
状态码

七、常见误解（帮你避坑）

❌ Fetch ≠ axios

工具	本质
fetch	浏览器原生
axios	封装库

❌ XHR 不是 XML 专用

虽然叫 XMLHttpRequest，但：

👉 现在基本都传 JSON

八、一句话总结

👉 Fetch/XHR = 浏览器发接口请求的两种方式（新旧）

九、现在最实用的一点

以后调接口只要记住：

👉 打开浏览器：

text 复制代码

F12 → Network → Fetch/XHR

可以看到：

接口有没有发出去
参数对不对
返回是不是后端的问题