IT评测·应用市场-qidao123.com
标题:
从 XMLHttpRequest 到 Fetch:当代 Web 请求技术的演进
[打印本页]
作者:
汕尾海湾
时间:
昨天 22:31
标题:
从 XMLHttpRequest 到 Fetch:当代 Web 请求技术的演进
在当代 Web 开发中,与服务器进行数据交互是必不可少的一部门。无论是加载动态内容、提交表单数据,还是实现及时更新,都必要通过 HTTP 请求来完成。本文将介绍两种主流的 Web 请求技术:
XMLHttpRequest
和
Fetch API
,探究它们的优缺点、使用场景以及如何选择符合的技术。
1. XMLHttpRequest:Web 请求的基石
什么是 XMLHttpRequest?
XMLHttpRequest 是一个 JavaScript 对象,用于在浏览器和服务器之间发送 HTTP 请求。它是实现
AJAX
(Asynchronous JavaScript and XML)的核心技术,答应网页在不重新加载的情况下与服务器交换数据。
核心特点
异步通讯
:可以在后台发送请求,不会阻塞页面渲染。
支持多种数据格式
:固然名字中包罗 XML,但它可以处理惩罚 JSON、HTML、纯文本等多种数据格式。
跨域请求
:通过 CORS(跨域资源共享)支持跨域请求。
基本用法
以下是 XMLHttpRequest 的基本使用步调:
创建对象
:
const xhr = new XMLHttpRequest();
复制代码
设置请求
:
使用 open() 方法设置请求类型(GET、POST 等)和目标 URL。
比方:
xhr.open('GET', 'https://api.example.com/data', true);
复制代码
设置回调函数
:
监听 onreadystatechange 事件,处理惩罚服务器相应。
比方:
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
复制代码
发送请求
:
使用 send() 方法发送请求。
比方:
xhr.send();
复制代码
处理惩罚相应
:
通过 responseText 或 responseXML 获取服务器返回的数据。
完整的示例:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
复制代码
优缺点
长处
:
兼容性好,几乎支持全部浏览器。
功能强大,支持多种数据格式和跨域请求。
缺点
:
语法复杂,回调函数嵌套轻易导致“回调地狱”。
错误处理惩罚不敷直观。
2. Fetch API:当代 Web 请求的新标准
什么是 Fetch?
Fetch 是当代浏览器提供的一个用于发起网络请求的 API,旨在更换 XMLHttpRequest。它基于
Promise
,提供了更简洁、灵活的语法,并支持流式数据处理惩罚。
核心特点
基于 Promise
:使用 Promise 处理惩罚异步操纵,代码更易读。
简洁的语法
:相比 XMLHttpRequest,Fetch 的代码更简洁直观。
流式数据处理惩罚
:支持处理惩罚大文件或流式数据。
内置 CORS 支持
:默认支持跨域请求。
基本用法
以下是 Fetch 的基本使用示例:
发起 GET 请求
:
fetch('https://api.example.com/data')
.then(response => response.json()) // 将响应解析为 JSON
.then(data => console.log(data)) // 处理数据
.catch(error => console.error(error)); // 捕获错误
复制代码
发起 POST 请求
:
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' }) // 发送 JSON 数据
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
复制代码
处理惩罚相应
:
response.json():剖析为 JSON。
response.text():剖析为文本。
response.blob():剖析为二进制数据(如图片、文件)。
response.arrayBuffer():剖析为二进制数组。
错误处理惩罚
:
Fetch 只有在网络错误时才会触发 catch,HTTP 错误(如 404、500)必要通过 response.ok 或 response.status 手动查抄。
比方:
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
复制代码
高级用法
设置请求头
:
fetch(url, {
headers: {
'Authorization': 'Bearer token',
'Content-Type': 'application/json'
}
});
复制代码
超时控制
:Fetch 本身不支持超时设置,但可以通过 Promise.race 实现
const timeout = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error('Request timed out')), 5000);
});
Promise.race([fetch(url), timeout])
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
复制代码
取消请求
:使用 AbortController 取消请求
const controller = new AbortController();
const signal = controller.signal;
fetch(url, { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// 取消请求
controller.abort();
复制代码
优缺点
长处
:
语法简洁,基于 Promise,易于使用。
支持流式数据处理惩罚和更强大的功能。
缺点
:
必要手动查抄 HTTP 错误。
兼容性较差(不支持 IE 浏览器)。
3. XMLHttpRequest vs Fetch:如何选择?
特性XMLHttpRequestFetch语法基于回调,较复杂基于 Promise,更简洁错误处理惩罚自动处理惩罚 HTTP 错误必要手动查抄 HTTP 错误流式数据处理惩罚不支持支持取消请求使用 xhr.abort()使用 AbortController兼容性全部浏览器支持当代浏览器支持
选择建议
使用 Fetch
:
假如你的项目面向当代浏览器,推荐使用 Fetch,由于它更简洁、功能更强大。
假如必要处理惩罚流式数据或实现更复杂的请求逻辑,Fetch 是更好的选择。
使用 XMLHttpRequest
:
假如必要兼容旧浏览器(如 IE),XMLHttpRequest 是唯一的选择。
假如你对 Fetch 的错误处理惩罚机制不满足,也可以选择 XMLHttpRequest。
4. 总结
从 XMLHttpRequest 到 Fetch,Web 请求技术经历了明显的演进。XMLHttpRequest 作为 AJAX 的基石,为当代 Web 应用奠定了底子;而 Fetch 则以其简洁的语法和强大的功能,成为当代开发的首选工具。
在现实开发中,选择哪种技术取决于项目需求和目标用户。假如你必要兼容旧浏览器,XMLHttpRequest 是可靠的选择;假如你寻求更当代的开发体验,Fetch 无疑是更好的工具。无论选择哪种技术,明确它们的原理和使用场景,都是成为一名良好开发者的关键。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)
Powered by Discuz! X3.4