使用 Axios 实现流下载进度
作为一名开发者，处理文件下载时监控进度是一个常见需求。在这篇文章中，我们将学习如何使用 Axios 获取下载进度。下面是实现流程的概览：
| 步骤 | 描述 |
|---|---|
| 1 | 创建 Axios 实例，配置请求 |
| 2 | 使用 onDownloadProgress 选项监控下载进度 |
| 3 | 发起请求，下载文件 |
| 4 | 处理下载完成后的操作 |
步骤详解
1. 创建 Axios 实例，配置请求
首先，你需要安装 Axios（如果还未安装的话）：
npm install axios
然后，我们可以创建一个 Axios 实例，并配置请求的选项。以下是创建 Axios 实例的代码示例：
// 导入 Axios
import axios from 'axios';
// 创建 Axios 实例
const instance = axios.create({
baseURL: ' // API 基地址
timeout: 10000, // 请求超时时间（毫秒）
});
这段代码会创建一个配置好的 Axios 实例，你可以在此基础上进行 RESTful 请求。
2. 使用 onDownloadProgress 选项监控下载进度
接下来，我们可以使用 onDownloadProgress 通过回调函数来获取下载进度。参考下面的代码：
// 发起下载请求
const downloadFile = async (fileId) => {
try {
const response = await instance.get(`/download/${fileId}`, {
responseType: 'blob', // 使用 blob 类型接收文件
onDownloadProgress: progressEvent => {
const total = progressEvent.total; // 文件总大小
const current = progressEvent.loaded; // 已下载大小
const progress = Math.round((current / total) * 100); // 计算百分比
console.log(`下载进度：${progress}%`); // 输出下载进度
}
});
// 在这里处理文件，例如创建 URL 对象下载
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.ext'); // 设置下载文件名
document.body.appendChild(link);
link.click();
} catch (error) {
console.error('下载文件失败:', error); // 处理下载错误
}
};
在这个代码中，onDownloadProgress 允许我们监控下载进度，其中 progressEvent 里包含了已下载的字节和文件总大小。
3. 发起请求，下载文件
现在，你只需调用 downloadFile 函数并传入文件的 ID 进行下载：
downloadFile('12345'); // 替换为你的文件 ID
这段代码会开始文件下载并显示进度。
4. 处理下载完成后的操作
在文件下载完成后，代码中会生成一个可下载的链接，并触发自动下载。同时，我们也处理了异常情况，确保在下载失败时进行通知。
状态图
下面是一个简洁的状态图，描绘了整个下载进程。
stateDiagram
[*] --> 等待下载
等待下载 --> 下载中
下载中 --> 下载完成
下载中 --> 下载失败
下载完成 --> [*]
下载失败 --> [*]
结尾
通过以上步骤，我们成功实现了使用 Axios 下载文件并监控下载进度的功能。这种方法能为用户提供反馈，提高用户体验。
如果你刚入行，理解这一过程可能需要一些时间，但请坚持实践，逐渐你会掌握更多复杂的用法和技巧。希望这篇文章对你有所帮助！如有疑问，请随时问我。
