当前位置：首页 > VUE

vue请求实现进度条

2026-01-07 06:33:08VUE

实现请求进度条的方法

在Vue中实现请求进度条可以通过多种方式完成，常见的有使用第三方库如axios结合nprogress或自定义进度条组件。以下是几种实现方法：

使用axios和nprogress

安装依赖：

npm install axios nprogress

在请求拦截器和响应拦截器中添加进度条控制：

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);
});

自定义进度条组件

创建一个Vue组件实现进度条效果：

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

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

<style>
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #f0f0f0;
  z-index: 9999;
}
.progress {
  height: 100%;
  background-color: #42b983;
  transition: width 0.3s ease;
}
</style>

在全局或局部注册组件后，在请求时调用start和finish方法。

结合Vue Router实现路由切换进度条

在路由切换时显示进度条：

vue请求实现进度条

import Vue from 'vue';
import Router from 'vue-router';
import NProgress from 'nprogress';

Vue.use(Router);

const router = new Router({
  routes: [...]
});

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

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

以上方法可根据具体需求选择或组合使用。第三方库如nprogress提供了开箱即用的解决方案，而自定义组件则更灵活可控。