文章内容
2023/5/17 22:17:22,作 者: 黄兵
JavaScript xhr 和 fetch 那个更好
在这篇文章中:如何判断用户是否在线,我们通过一个 JavaScript xhr 的方式向服务器发送数据。
但是我们也可以使用 JavaScript xhr 的方式发送数据,下面是一个示例代码:
// 定义一个函数,用于向服务器发送AJAX请求,检查用户是否在线
function checkUserOnline() {
// 发送请求
fetch('/check_user_online')
.then(response => {
// 响应成功,检查状态码
if (response.ok) {
return response.text();
} else {
throw new Error('网络请求出错');
}
})
.then(data => {
// 处理响应数据
if (data === 'OK') {
console.log('用户在线');
} else {
console.log('用户不在线');
}
})
.catch(error => {
// 处理请求失败的情况
console.error('网络请求出错:', error);
});
}
// 在页面加载完成后,启动定时器,每隔30秒检查一次用户是否在线
window.onload = function () {
setInterval(checkUserOnline, 30000);
}
function checkUserOnline() {
// 发送请求
fetch('/check_user_online')
.then(response => {
// 响应成功,检查状态码
if (response.ok) {
return response.text();
} else {
throw new Error('网络请求出错');
}
})
.then(data => {
// 处理响应数据
if (data === 'OK') {
console.log('用户在线');
} else {
console.log('用户不在线');
}
})
.catch(error => {
// 处理请求失败的情况
console.error('网络请求出错:', error);
});
}
// 在页面加载完成后,启动定时器,每隔30秒检查一次用户是否在线
window.onload = function () {
setInterval(checkUserOnline, 30000);
}
在上面的代码中,我们使用fetch
函数来发送AJAX请求,其参数为请求的URL。fetch
函数会返回一个Promise对象,我们可以通过链式调用then
方法来处理响应结果。如果响应成功,我们可以使用response.text()
方法获取响应文本,如果响应失败,我们可以使用throw new Error()
抛出一个异常,然后使用catch
方法来处理异常。
那么 xhr 和 fetch 有什么区别呢?xhr 和 fetch 那个好呢?
相较于XMLHttpRequest
(简称xhr
),fetch
是一个比较新的API,提供了更简单、更强大的方式来进行网络请求。
相较于XMLHttpRequest
,fetch
有以下优点:
- 更简单:
fetch
的API更简洁,使用起来更方便。 - 更强大:
fetch
支持Promise、async/await等特性,使得代码更易读、易维护。 - 更安全:
fetch
使用CORS(跨域资源共享)来限制跨域请求,提高了安全性。
因此,如果你使用的是现代浏览器,推荐使用fetch
来发送AJAX请求。
其他相关推荐:
评论列表