如何使用 Axios 监听进度（onProgress）
作为一名新入行的开发者，你可能会在项目中遇到需要监听网络请求进度的情况。Axios 是一个流行的 HTTP 客户端，可以轻松地进行网络请求，其中包括监控上传或下载进度的功能。本文将详细讲解如何使用 Axios 实现这项功能，确保你能够理解每一个步骤。
流程概述
为了使用 Axios 监听请求进度，我们可以按照以下步骤进行操作：
| 步骤 | 描述 |
|---|---|
| 1 | 安装 Axios 库 |
| 2 | 创建 Axios 实例 |
| 3 | 配置 onUploadProgress 或 onDownloadProgress |
| 4 | 使用 Axios 发送请求 |
| 5 | 处理进度数据 |
接下来，我们将逐步讨论如何实现每一个步骤。
1. 安装 Axios 库
确保你已经安装了 Axios 库。如果还没有安装，可以通过 npm 或 yarn 进行安装。在项目的根目录下运行以下命令：
npm install axios
或者：
yarn add axios
2. 创建 Axios 实例
在你的项目中创建一个新的文件，通常命名为 axiosInstance.js，并在其中创建一个 Axios 实例。这样可以方便对 Axios 的全局配置。
// axiosInstance.js
import axios from 'axios';
// 创建 Axios 实例
const axiosInstance = axios.create({
baseURL: ' // 替换为你的 API 基础 URL
timeout: 10000 // 请求超时时间
});
export default axiosInstance;
注释：
baseURL是 API 的基础地址。timeout是请求超时的设置。
3. 配置 onUploadProgress 或 onDownloadProgress
在发送请求时，我们可以传入 onUploadProgress 和 onDownloadProgress 来监听进度。
onUploadProgress监听上传进度。onDownloadProgress监听下载进度。
// 在你的请求文件中
import axiosInstance from './axiosInstance';
const uploadFile = (file) => {
const formData = new FormData();
formData.append('file', file);
axiosInstance.post('/upload', formData, {
onUploadProgress: (progressEvent) => {
const {loaded, total} = progressEvent;
const percentCompleted = Math.round((loaded * 100) / total);
console.log(`上传进度: ${percentCompleted}%`);
}
})
.then(response => {
console.log('上传成功：', response.data);
})
.catch(error => {
console.error('上传失败：', error);
});
};
注释：
formData.append用于将文件附加到表单数据中。onUploadProgress回调函数接收一个progressEvent参数。- 通过计算
loaded和total的比率，得到上传进度的百分比。
4. 使用 Axios 发送请求
在你的应用程序中调用 uploadFile 函数，同时传入需要上传的文件。这可以是在文件选择事件中触发的，例如用户选择上传文件时。
// HTML 文件中
<input type="file" id="fileInput" />
// JavaScript 文件中
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
uploadFile(file);
}
});
注释：
- 当用户选择文件时，触发
change事件，调用uploadFile函数。
5. 处理进度数据
在 onUploadProgress 函数中，我们已经处理了上传进度数据。你可以将进度数据显示在用户界面上，以增强用户体验。你可以用一个简单的进度条来表示。
// 在 HTML 中
<div id="progressBar" style="width: 100%; background: #f3f3f3;">
<div id="progress" style="width: 0%; background: #4caf50; height: 20px;"></div>
</div>
// 更新进度条
onUploadProgress: (progressEvent) => {
const {loaded, total} = progressEvent;
const percentCompleted = Math.round((loaded * 100) / total);
document.getElementById('progress').style.width = `${percentCompleted}%`;
console.log(`上传进度: ${percentCompleted}%`);
}
注释：
- 使用简单的 CSS 样式来创建进度条。
- 更新进度条的宽度，使用
percentCompleted计算好的进度百分比。
关系图
以下是一个简单的实体关系图，展示了我们的请求流程。
erDiagram
REQUEST {
string file
}
RESPONSE {
string success
string message
}
REQUEST ||--o| RESPONSE : triggers
结论
通过以上步骤，你应该已经理解了如何使用 Axios 来监听请求进度。这不仅能帮助你更好地体验请求的过程，同时也能提高用户体验。当你在实际项目中需要上传或下载文件时，记得应用这些知识，相信你会做得很好！
如果你有任何疑问，欢迎随时提问。继续学习和实践，你会成为一个优秀的开发者！
