1.引言
在很多开发实践中,我们需要对接口请求做一个进度监控,而绝大多数实践中,都采用不断获取后端返回的progress进度值或干脆使用setTimeInterval()
方式实现的假效果。而实际上,每一个AJAX请求是可以实时监控进度的,下面我们来了解一下AJAX进度监控的实现方式。
2.AJAX
2.1 AJAX实现原理
首先我们回顾一下AJAX的原理,用比较通俗的话来讲,就是使用new XMLHttpRequest()
方法创建一个xml对象,通过xml对象实现与服务器建立连接、发送消息、获取响应等一系列过程。接下来我们看一下ajax实现原理
function makeAjaxRequest(url, method, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
try {
var jsonResponse = JSON.parse(xhr.responseText);
callback(null, jsonResponse);
} catch (e) {
callback(new Error('Invalid JSON response'), null);
}
} else {
callback(new Error(xhr.statusText), null);
}
}
};
xhr.onerror = function() {
callback(new Error('Network error'), null);
};
if (method === 'GET') {
xhr.send(null);
} else {
xhr.send(JSON.stringify(data));
}
}
// 使用示例
makeAjaxRequest(
"http://xxxxx", // 这是一个返回 JSON 数据的示例 API
'GET',
null,
function(err, response) {
var resultElement = document.getElementById('result');
if (err) {
resultElement.textContent = 'Error: ' + err.message;
console.error('Error:', err);
} else {
resultElement.textContent = 'Success: ' + JSON.stringify(response, null, 2);
console.log('Success:', response);
}
}
)
2.2 监控原理:xml对象监听progress事件
xhr.addEventListener('progress', (event) => {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log(`上传进度:${percentComplete}%`);
}
});
3.原理分析
3.1 XMLHttpRequest的progress事件
progress事件是XMLHttpRequest对象的一部分,提供了在请求过程中获取进度信息的能力。通过event.loaded和event.total属性获取到当前下载的数据量和接收数据的总量,然后计算出已经下载的数据比例,再通过进度条的方式展示给用户。
3.2 Fetch API的Upload事件
Fetch API通过Upload对象提供了对上传进度的监听。这个对象可以通过fetch的signal属性获得。监听上传进度的方法类似于XMLHttpRequest,使用event.loaded和event.total来计算百分比。
4. 优劣势分析
4.1 优势
实时反馈: 监控AJAX接口进度可以提供实时反馈,改善用户体验。
更灵活的处理: 可以根据进度信息,灵活处理界面更新和错误处理。
4.2 劣势
浏览器兼容性: 一些旧版本的浏览器可能不完全支持新的Fetch API,需要进行降级处理。
复杂性: 在处理进度监控时,代码可能变得较为复杂,需要仔细测试和维护。
5. 使用场景
- 在实现过程中,需要权衡优劣势及使用场景。例如寻常的接口,数据量较小,响应时间较快,可能progress监听事件执行一次就获取到了所有的数据总量,或者是在不到1秒内执行多次全部响应的情况下,监控进度体现在页面上也是没有感知的。所以我们的使用场景一般是用于大文件上传下载,或者是特别大(以Mb为单位)的响应体,可以通过监控进度并在页面上通过进度条或动画的形式展现。以下为一个列表接口的普通get请求过程:
代码片段:
6.总结
- 通过本文的分析,我们深入了解了如何利用XMLHttpRequest和Fetch API实现AJAX接口进度监控。选择适合项目的方案取决于开发者的需求和浏览器兼容性要求。
- ajax进度条与用户体验的关系非常密切。在响应时间较长的情况下,通过ajax进度条,用户可以清楚地了解到数据下载的进度,从而更好地了解数据下载的状态。通过优化进度条的样式和动画效果,还可以提高用户体验,让用户感觉数据下载速度更快,更加流畅。