如何为$http请求添加进度条

在Web开发中，为HTTP请求添加进度条可以提升用户体验，尤其是在处理大文件上传或下载时。以下是实现这一功能的基础概念和相关步骤：

基础概念

HTTP请求：客户端与服务器之间的通信协议。
进度条：一种图形用户界面元素，用于显示任务的完成进度。
XMLHttpRequest (XHR)：用于在后台与服务器交换数据的JavaScript对象。
Fetch API：现代浏览器提供的用于进行网络请求的更强大的API。

实现步骤

使用XMLHttpRequest

function uploadFile(file) {
    var xhr = new XMLHttpRequest();
    var progressBar = document.getElementById('progress-bar');

    xhr.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
            var percentComplete = (event.loaded / event.total) * 100;
            progressBar.value = percentComplete;
        }
    }, false);

    xhr.open('POST', '/upload', true);
    xhr.send(file);
}

使用Fetch API与ReadableStream

async function uploadFile(file) {
    const progressBar = document.getElementById('progress-bar');
    const response = await fetch('/upload', {
        method: 'POST',
        body: file,
        headers: {
            'Content-Type': file.type
        }
    });

    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');
    let receivedLength = 0;

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        receivedLength += value.length;
        progressBar.value = (receivedLength / contentLength) * 100;
    }
}

优势

用户体验：用户可以看到任务的实时进度，减少等待的焦虑感。
反馈机制：及时反馈任务状态，有助于用户了解当前操作的情况。

应用场景

大文件上传：如视频、图片等。
长时间运行的后台任务：如数据分析、批量处理等。
实时数据传输：如实时聊天、在线游戏等。

可能遇到的问题及解决方法

进度条不更新：
- 原因：可能是事件监听器未正确绑定或事件未触发。
- 解决方法：确保progress事件监听器已正确添加，并且在请求过程中能够触发。

进度计算错误：
- 原因：event.lengthComputable为false，表示无法计算总长度。
- 解决方法：确保服务器端正确设置了Content-Length头，或者使用其他方式估算进度。
浏览器兼容性问题：
- 原因：不同浏览器对Fetch API或XMLHttpRequest的支持程度不同。
- 解决方法：使用Polyfill或回退机制，确保在不支持新API的浏览器中也能正常工作。