【前端网络请求入门】XMLHttpRequest与Fetch保姆级教程

新手学前端时，经常会被「如何让网页和服务器说话」难住。今天我们用最通俗的语言，把浏览器最常用的两种网络请求方式——XMLHttpRequest和Fetch讲清楚，还会带完整的代码示例，跟着敲一遍就能上手！

一、先搞懂「网络请求」是什么？

就像你点外卖时打电话给商家：

1. 你告诉商家地址（请求地址）
2. 说清楚要什么餐（请求参数）
3. 商家做好后把外卖给你（返回数据）

浏览器和服务器通信也是一样的道理，只不过「打电话」的工具就是XHR和Fetch。

二、第一种工具：XHR（老派但可靠）

XHR是XMLHttpRequest的缩写，2000年左右就有了，虽然有点「老」，但兼容性超好，所有浏览器都支持。

1. 发送GET请求（获取数据）

就像你打电话问商家「今天有什么推荐菜」：

// 1. 创建一个"电话"对象
const xhr = new XMLHttpRequest();// 2. 告诉"电话"要打给谁（请求地址）和用什么方式（GET）
xhr.open('GET', 'https://api.example.com/products');// 3. 监听商家什么时候回复（响应处理）
xhr.onload = function() {if (xhr.status === 200) { // 200表示成功console.log('服务器回复了：', xhr.responseText); // 回复内容是字符串}
};// 4. 拨打电话！
xhr.send();

2. 发送POST请求（提交数据）

比如你告诉商家「我要订一份宫保鸡丁，地址是XXX」：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/orders');// 设置请求头（告诉商家我要发JSON格式的数据）
xhr.setRequestHeader('Content-Type', 'application/json');xhr.onload = function() {if (xhr.status === 201) { // 201表示创建成功console.log('订单提交成功！');}
};// 发送的数据（转成JSON字符串）
const data = {product: '宫保鸡丁',address: 'XX路123号'
};
xhr.send(JSON.stringify(data));

XHR的缺点：

• 代码像「拼积木」，步骤多
• 处理错误要用onerror，不够直观
• 不支持Promise，异步处理麻烦（需要嵌套回调）

三、第二种工具：Fetch（现代派，更简洁）

Fetch是ES6推出的新API，基于Promise设计，代码更简洁优雅，是现在的主流选择。

1. 发送GET请求（用async/await更简单）

async function fetchProducts() {try {// 1. 发起请求（相当于拨号）const response = await fetch('https://api.example.com/products');// 2. 解析响应（商家把外卖递给你，你要打开包装）// 常见的解析方式：const jsonData = await response.json(); // 解析JSON数据// const textData = await response.text(); // 解析纯文本// const blobData = await response.blob(); // 解析二进制文件（如图像）console.log('获取到的数据：', jsonData);} catch (error) {console.error('请求失败：', error); // 网络错误会走到这里}
}// 调用函数
fetchProducts();

2. 发送POST请求（带数据）

async function submitOrder() {try {const data = {product: '宫保鸡丁',address: 'XX路123号'};const response = await fetch('https://api.example.com/orders', {method: 'POST', // 请求方法headers: {'Content-Type': 'application/json', // 设置请求头},body: JSON.stringify(data), // 发送的body数据（必须是字符串或Blob）});if (!response.ok) { // 检查HTTP状态码（比如400错误）throw new Error(`HTTP错误：${response.status}`);}const result = await response.json();console.log('服务器返回：', result);} catch (error) {console.error('提交失败：', error);}
}

Fetch的优点：

• 语法更简洁，像「写人话」
• 天然支持Promise，用async/await处理异步更清晰
• 功能更强大（支持请求/响应体、流处理等）

注意！Fetch的「坑」：

1. 网络错误才会触发catch：比如断网、域名错误。但如果服务器返回404/500等HTTP错误，不会进catch，需要手动检查response.ok
2. 必须手动解析响应：XHR的responseText直接是字符串，Fetch需要用response.json()等方法解析
3. 老浏览器不支持：IE浏览器完全不支持，需要加「polyfill」（兼容性补丁）

四、XHR和Fetch怎么选？

场景	推荐用XHR	推荐用Fetch
兼容性要求高	✅（所有浏览器都支持）	❌（需polyfill兼容IE）
现代项目开发	❌（代码繁琐）	✅（主流选择）
需要精确控制请求过程	✅（能监听progress进度）	❌（需配合AbortController）
处理复杂响应	❌（只能解析字符串）	✅（支持JSON/Blob/流等）

五、实战：用Fetch做一个「天气查询」小Demo

步骤1：HTML结构

<input type="text" id="city" placeholder="输入城市名">
<button id="search">查询天气</button>
<p id="result"></p><script>const searchBtn = document.getElementById('search');searchBtn.addEventListener('click', async function() {const city = document.getElementById('city').value;if (!city) return;try {const response = await fetch(`https://api.weather.com?city=${city}`);const data = await response.json();document.getElementById('result').textContent = `天气：${data.weather}`;} catch (error) {document.getElementById('result').textContent = '查询失败，请重试';}});
</script>

步骤2：关键代码解释

1. fetch(https://api.weather.com?city=${city})：拼接带城市参数的URL
2. response.json()：把服务器返回的JSON数据转成JS对象
3. 错误处理：同时处理网络错误和HTTP错误（通过response.ok）

六、总结：新人必记的3个重点

1. XHR是「老大哥」：虽然代码多，但兼容性好，适合需要支持古老浏览器的项目
2. Fetch是「新宠儿」：语法简单功能强，现代项目首选，但要记得处理HTTP错误
3. 核心流程不变：不管用哪个工具，都是「发起请求→处理响应→处理错误」这三步