axios下载文件显示进度
在前端开发中，我们经常需要下载文件并显示下载进度，以便用户可以清楚地了解下载的情况。本文将介绍如何使用axios库来实现文件下载，并在下载的过程中显示下载进度。
axios简介
axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js环境中。它具有以下特点：
- 支持Promise API
- 支持拦截请求和响应
- 支持取消请求
- 支持CSRF攻击防护
- 支持转换请求和响应数据
- 支持浏览器中的防止缓存
下载文件
要下载文件，我们首先需要发送一个GET请求，并将响应的数据保存到一个文件中。axios提供了一个get方法来发送GET请求。下面是一个简单的示例：
axios.get(' {
responseType: 'blob' // 指定响应的数据类型为二进制数据
}).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();
});
在上面的代码中，我们通过responseType: 'blob'将响应的数据类型设置为二进制数据。然后，我们将响应的数据创建为一个Blob对象，并使用URL.createObjectURL()方法创建一个临时的URL。接下来，我们创建一个a标签，将URL设置为临时URL，设置download属性为要下载的文件名，将a标签添加到页面中，并模拟点击a标签来触发下载。
显示下载进度
要显示下载进度，我们可以使用axios提供的onDownloadProgress回调函数。该函数会在下载进度发生变化时被调用，可以通过event.loaded和event.total两个属性来获取当前已下载的字节数和总字节数。下面是一个示例：
axios.get(' {
responseType: 'blob',
onDownloadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`下载进度：${percent}%`);
}
}).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();
});
在上面的代码中，我们通过onDownloadProgress回调函数来实时获取下载进度。我们使用Math.round方法将下载进度转换为百分比，并打印出来。
完整示例
下面是一个完整的示例，演示了如何使用axios下载文件并显示下载进度：
// 在HTML中添加一个按钮，点击按钮开始下载文件
<button id="downloadButton">下载文件</button>
// JavaScript代码
const downloadButton = document.getElementById('downloadButton');
downloadButton.addEventListener('click', () => {
axios.get(' {
responseType: 'blob',
onDownloadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`下载进度：${percent}%`);
}
}).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();
});
});
在上面的代码中，我们给下载按钮添加了一个点击事件监听器，当点击按钮时会触发下载文件的操作。在下载过程中，我们会实时打印下载进度。
