Vue中基于Axios实现请求进度条展示的方案咨询

核心思路 #

Axios提供onDownloadProgress回调监听服务器响应数据的接收进度（你的场景是查询大量数据返回，重点在下载进度），通过该回调获取已接收字节数和总字节数，计算出进度百分比后绑定到Vue组件的响应式变量，即可在页面上实时展示。

步骤1：在Vue组件中定义进度变量 #

根据你使用的Vue版本，声明用于存储进度的响应式变量：

// Vue2 示例
data() {
  return {
    progressPercent: 0 // 进度百分比，范围0-100
  }
}

// Vue3 示例
import { ref } from 'vue'
const progressPercent = ref(0)

步骤2：修改Axios请求配置 #

在原POST请求的配置中添加进度监听回调，计算并更新进度：

axios.post(url, data, {
  headers: {'Authorization': 'Bearer ' + context.state.token},
  // 监听下载进度（接收服务器返回数据的过程）
  onDownloadProgress: (progressEvent) => {
    if (progressEvent.total) {
      // 计算进度百分比，保留整数
      this.progressPercent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
      // Vue3 写法：progressPercent.value = Math.round(...)
    }
  }
})
.then(async (response) => {
  resolve(response.data);
  // 请求完成后重置进度
  this.progressPercent = 0
})
.catch(async(error) => {
  reject(error);
  // 请求失败也重置进度
  this.progressPercent = 0
})
.finally(() => {
});

步骤3：页面上展示进度 #

在组件模板中添加进度展示元素，比如进度条或百分比文本：

<!-- Vue2/Vue3 通用示例 -->
<div class="progress-container">
  <div class="progress-bar" :style="{ width: `${progressPercent}%` }"></div>
  <span>{{ progressPercent }}%</span>
</div>

搭配基础CSS（可选）：

.progress-container {
  width: 100%;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
}
.progress-bar {
  height: 100%;
  background-color: #42b983;
  transition: width 0.2s ease;
}

关键注意事项 #

• 服务器需返回Content-Length响应头：progressEvent.total的值来自该响应头，如果服务器未返回，无法计算准确总字节数，此时只能展示"加载中"状态，或基于已加载字节数做模糊提示。
• 上传大请求体场景：如果你的POST请求本身携带大量数据（比如上传文件），需同时配置onUploadProgress回调监听上传进度，逻辑和下载进度一致。
• 进度重置：请求完成（成功/失败）后务必重置进度变量，避免下次请求前显示旧进度值。

内容的提问来源于stack exchange，提问作者Edson Ordaz