欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 新车 > 【前端网络请求入门】XMLHttpRequest与Fetch保姆级教程

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

2025/5/2 16:22:01 来源:https://blog.csdn.net/qq_41590018/article/details/147176628  浏览:    关键词:【前端网络请求入门】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. 核心流程不变:不管用哪个工具,都是「发起请求→处理响应→处理错误」这三步

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词