AJAX进度监控实现

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进度条，用户可以清楚地了解到数据下载的进度，从而更好地了解数据下载的状态。通过优化进度条的样式和动画效果，还可以提高用户体验，让用户感觉数据下载速度更快，更加流畅。