axios中使用onDownloadProgress

最新推荐文章于 2024-11-25 20:16:16 发布

邱锡鹏

最新推荐文章于 2024-11-25 20:16:16 发布

阅读量772

点赞数

在Web开发中，下载大文件时如何实时跟踪下载进度是一项很有价值的功能，特别是在用户体验至上的今天。今天，我们来深入探讨一下如何在axios中使用onDownloadProgress，轻松实现这一功能！

🚀 什么是 Axios？

Axios 是一个基于Promise的HTTP库，广泛用于发送HTTP请求。它在浏览器和Node.js中都可以使用，支持拦截请求和响应、转换数据、自动化处理JSON数据等功能，非常适合现代Web应用开发。

🛠 什么是 `onDownloadProgress`？

onDownloadProgress 是 axios 提供的一个回调函数，它允许我们在下载过程中实时获取下载进度。这在处理大文件或慢速网络连接时尤其有用。

🌟 原理解析

onDownloadProgress 在下载数据的过程中会不断触发，传入的参数是一个ProgressEvent对象，这个对象包含了当前下载过程中的各种信息，例如已经下载的字节数、总字节数等。

通过这些信息，我们可以计算出当前下载的百分比，并实时更新UI，给用户带来更好的体验。

🔍 代码案例分析

下面我们来看一个使用onDownloadProgress来跟踪文件下载进度的具体例子：

import axios from 'axios';

function downloadFile(url) {
    axios({
        method: 'get',
        url: url,
        responseType: 'blob', // 确保服务器返回的是文件数据
        onDownloadProgress: function(progressEvent) {
            // 计算下载进度
            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            console.log(`Download progress: ${percentCompleted}%`);

            // 更新UI，如进度条
            document.getElementById('progressBar').style.width = `${percentCompleted}%`;
        }
    })
    .then(response => {
        // 创建一个链接，指向下载的文件并自动触发下载
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.zip'); // 下载的文件名
        document.body.appendChild(link);
        link.click();

        // 释放URL对象
        window.URL.revokeObjectURL(url);
    })
    .catch(error => {
        console.error('Download failed:', error);
    });
}

// 调用函数下载文件
downloadFile('https://example.com/largefile.zip');

🔧 关键点解释

responseType: 'blob': 设置responseType为blob是为了确保下载的数据以二进制大对象（Blob）的形式返回，这在处理文件下载时非常重要。
onDownloadProgress: 这个回调函数每次数据块到达时都会触发，progressEvent.loaded 表示已下载的字节数，progressEvent.total 是文件的总大小。我们通过这两个值计算下载进度百分比。
创建和自动点击下载链接: 为了实现文件下载，创建了一个隐形的<a>标签，并通过点击它来触发文件下载。

⚖️ 与其他方法对比

在浏览器环境下，使用XMLHttpRequest可以实现类似的进度跟踪功能，但axios封装了更现代的Promise风格接口，并且更容易与其他Promise链结合，代码更加简洁。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/largefile.zip');
xhr.responseType = 'blob';
xhr.onprogress = function(event) {
    if (event.lengthComputable) {
        const percentCompleted = Math.round((event.loaded * 100) / event.total);
        console.log(`Download progress: ${percentCompleted}%`);
    }
};
xhr.onload = function() {
    if (xhr.status === 200) {
        const url = window.URL.createObjectURL(new Blob([xhr.response]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.zip');
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(url);
    }
};
xhr.send();