axios 获取接口加载进度
时间: 2023-08-05 21:07:08 浏览: 172
想要获取 Axios 请求的进度,可以使用 Axios 提供的 `onDownloadProgress` 和 `onUploadProgress` 两个属性。其中,`onDownloadProgress` 用于获取下载进度,`onUploadProgress` 用于获取上传进度。
以下是一个获取下载进度的例子:
```javascript
axios({
url: 'http://example.com/file.zip',
method: 'GET',
responseType: 'blob',
onDownloadProgress: function (progressEvent) {
// 获取下载进度
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(percentCompleted);
},
}).then(response => {
// 下载完成后的操作
});
```
如果想要获取上传进度,可以使用 `onUploadProgress` 属性,如下所示:
```javascript
const formData = new FormData();
formData.append('file', file);
axios.post('/upload', formData, {
onUploadProgress: function (progressEvent) {
// 获取上传进度
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(percentCompleted);
},
}).then(response => {
// 上传完成后的操作
});
```
注意,以上代码仅作为示例,具体情况需要根据实际情况进行相应的更改。
阅读全文