axios封装上传进度返回进度
axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js中发送HTTP请求。在前端开发中，经常需要上传文件或者提交表单数据，而axios提供了一个非常方便的方式来完成这些操作。
本文将介绍如何通过封装axios来实现上传进度的返回，并通过代码示例来演示具体的实现步骤。
封装axios
首先，我们需要封装一个自定义的axios实例，以便于在请求中添加进度事件的监听器。我们可以通过axios的create方法来创建一个自定义的axios实例。
// fileUpload.js
import axios from 'axios';
const fileUpload = axios.create();
export default fileUpload;
在封装的axios实例中，我们可以添加一些自定义的请求拦截器和响应拦截器，以便于处理请求和响应的逻辑。
监听上传进度
在文件上传过程中，我们可以通过监听XMLHttpRequest对象的progress事件来获取上传进度。在封装的axios实例中，我们可以使用axios的interceptors.request方法来添加请求拦截器，从而在发送请求之前添加进度事件的监听器。
// fileUpload.js
// ...
fileUpload.interceptors.request.use(config => {
if (config.onUploadProgress) {
const { onUploadProgress } = config;
config.onUploadProgress = progressEvent => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
onUploadProgress(percent);
};
}
return config;
}, error => {
return Promise.reject(error);
});
// ...
在上述代码中，我们首先判断config中是否传入了onUploadProgress回调函数，如果有，则在config.onUploadProgress中添加进度事件的监听器。在监听器中，我们计算上传进度的百分比，并将其作为参数传递给onUploadProgress回调函数。
使用自定义axios实例上传文件
使用我们封装的axios实例来上传文件非常简单。我们只需要在发送请求时，将onUploadProgress回调函数作为配置项传递给axios即可。
// App.js
import React from 'react';
import fileUpload from './fileUpload';
const uploadFile = file => {
const formData = new FormData();
formData.append('file', file);
return fileUpload.post('/upload', formData, {
onUploadProgress: percent => {
console.log(`上传进度：${percent}%`);
}
});
};
const App = () => {
const handleFileChange = e => {
const file = e.target.files[0];
uploadFile(file)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
};
return (
<div>
<input type="file" onChange={handleFileChange} />
</div>
);
};
export default App;
在上述代码中，我们定义了一个uploadFile函数来上传文件。在发送请求时，我们将onUploadProgress回调函数传递给axios的配置项中，并在控制台打印上传进度。
甘特图
下面是一个使用mermaid语法绘制的上传进度的甘特图。
gantt
title 上传进度
section 上传
上传文件: 2022-01-01, 3d
处理上传: 2022-01-04, 2d
上传完成: 2022-01-06, 1d
以上是关于axios封装上传进度返回进度的科普文章。通过封装axios并添加进度事件的监听器，我们可以轻松实现文件上传进度的返回。希望本文对你有所帮助！
