黄兵的个人博客

XMLHttpRequest 进度理解

XMLHttpRequest 提供了各种在请求被处理期间发生的事件以供监听。这包括定期进度通知、错误通知，等等。

我们用的最多的是 progress 和 load 两种事件。

progress 事件会在请求接收到数据的时候被周期性触发。

load 事件会在 XMLHttpRequest 请求完成触发。

下面是示例：

xhr.addEventListener("load", transferComplete);
xhr.addEventListener("progress", downloadProgress);

function transferComplete(evt) {
    // 数据加载完成之后关闭进度
    circularProgress.close();
    document.querySelector('.mdc-button').disabled = false;
    const btnLabelEle = document.querySelector(".label-wrapper");
    btnLabelEle.style.display = 'block';
}

function downloadProgress(oEvent) {
    const interval = setInterval(download_progress, 100, oEvent);

    function download_progress(oEvent) {
        const response = JSON.parse(oEvent.target.response)
        const header = new Headers();
        header.append('Content-Type', 'application/json')
        const fetchInit = {
            method: 'GET',
            headers: header,
        };
        const request = new Request("/progress/" + response.thread_id);
        fetch(request, fetchInit).then(function (response) {
            return response.json();
        }).then(function (response) {
            if (parseInt(response.progress) === 100) {
                clearInterval(interval);
            }

        });
    }

}

上面代码 transferComplete 函数间歇性的访问后端，获取进度。

同时给一个 progress event 的示例代码：progress event

同时这里使用了一个定时器（setInterval）,每0.1s 发送一次请求，如果后端文件下载完成，之后清除定时器（clearInterval）。

再来一段定时器的代码示例：

var interval = setInterval(update_progress, 1000);
function update_progress() {
     $.get('/progress').done(function(n){
         n = n / 5;  // percent value
         if (n == 100) {
            clearInterval(interval);
            callback(); // user defined
         }
         $('.progress-bar').animate({'width': n +'%'}).attr('aria-valuenow', n);    
     }).fail(function() {
         clearInterval(interval);
         displayerror(); // user defined
     });
}

这里请求使用了 fetch。关于 fetch 的详细解释，我将在其他文章详述。

虽然 progress 会间歇性的访问后端，但是经过测试，还是无法获取进度，只能加一个定时器，定时获取后端数据。

参考资料：

1、XMLHttpRequest 监测进度

2、XMLHttpRequest: progress event

3、How to create a progress bar using flask? [duplicate]

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - XMLHttpRequest 进度理解