axios封装的那个字段可以用来当作进度条

如果你使用 Axios 发送请求，可以使用 Axios 提供的 onDownloadProgress 和 onUploadProgress 回调函数来监测下载和上传的进度，并将进度数据传递给进度条组件进行展示。

下面是一个示例代码，展示如何使用 onDownloadProgress 和 onUploadProgress 回调函数来实现进度条：

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '/your-api-url',
});

axiosInstance.interceptors.request.use((config) => {
  // 在请求开始前，对请求数据进行处理
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

axiosInstance.interceptors.response.use((response) => {
  // 对响应数据进行处理
  return response;
}, (error) => {
  // 处理响应错误
  return Promise.reject(error);
});

axiosInstance.get('/your-api-url', {
  onDownloadProgress: (progressEvent) => {
    const percentComplete = progressEvent.loaded / progressEvent.total * 100;
    console.log(`下载已完成 ${percentComplete}%`);
    // 更新进度条的样式
    progressBar.style.width = `${percentComplete}%`;
  },
}).then(response => {
  const data = response.data;
  console.log('接口调用成功', data);
}).catch(error => {
  console.error('接口调用失败', error);
});

在上面的代码中，我们首先创建了一个 Axios 实例，并为该实例添加了请求和响应拦截器。接着，我们使用该实例发送了一个 GET 请求，并在请求配置对象中添加了 onDownloadProgress 回调函数来监测下载进度。在回调函数中，我们计算出下载进度的百分比，并将其用于更新进度条的样式。

除了 onDownloadProgress 回调函数外，Axios 还提供了 onUploadProgress 回调函数来监测上传进度。你可以将上面的示例代码中的 onDownloadProgress 替换为 onUploadProgress，即可实现上传进度的监测。