当前位置：首页 > VUE

vue请求实现进度条

2026-01-12 08:10:59VUE

实现请求进度条的方法

在Vue中实现请求进度条可以通过多种方式完成，常见的有使用axios拦截器和第三方库如NProgress。以下是具体实现方法：

使用axios拦截器配合NProgress

安装NProgress库：

npm install nprogress

在Vue项目中配置axios拦截器：

import axios from 'axios';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

axios.interceptors.request.use(config => {
  NProgress.start();
  return config;
});

axios.interceptors.response.use(response => {
  NProgress.done();
  return response;
}, error => {
  NProgress.done();
  return Promise.reject(error);
});

自定义进度条组件

创建自定义进度条组件：

<template>
  <div class="progress-bar" :style="{ width: progress + '%' }"></div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    start() {
      this.progress = 0;
      const interval = setInterval(() => {
        this.progress += 10;
        if (this.progress >= 100) {
          clearInterval(interval);
        }
      }, 300);
    },
    finish() {
      this.progress = 100;
      setTimeout(() => {
        this.progress = 0;
      }, 500);
    }
  }
};
</script>

<style>
.progress-bar {
  height: 3px;
  background-color: #42b983;
  transition: width 0.3s ease;
}
</style>

在main.js中全局注册：

import ProgressBar from './components/ProgressBar.vue';

const progress = new Vue(ProgressBar).$mount();
document.body.appendChild(progress.$el);

Vue.prototype.$progress = {
  start: progress.start,
  finish: progress.finish
};

使用vue-router的导航守卫

结合vue-router实现页面切换时的进度条：

import NProgress from 'nprogress';

router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

router.afterEach(() => {
  NProgress.done();
});

注意事项

进度条样式可以通过CSS自定义，NProgress默认提供蓝色进度条，可以通过修改CSS文件更改颜色和样式。

对于文件上传等长时间请求，需要在上传方法中手动控制进度：

vue请求实现进度条

axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    this.$progress.progress = percent;
  }
})

以上方法可以根据项目需求选择使用，NProgress方案较为成熟，自定义组件则更加灵活。