当前位置：首页 > VUE

vue请求实现进度条

2026-02-09 21:17:30VUE

实现请求进度条的方法

在Vue中实现请求进度条可以通过多种方式完成，以下是几种常见的方法：

使用axios拦截器

axios拦截器可以在请求发出前和响应返回后执行特定逻辑，适合用于进度条控制。

import axios from 'axios';

// 创建axios实例
const instance = axios.create();

// 请求拦截器
instance.interceptors.request.use(config => {
  // 进度条开始
  NProgress.start();
  return config;
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 进度条结束
  NProgress.done();
  return response;
}, error => {
  // 请求出错时也结束进度条
  NProgress.done();
  return Promise.reject(error);
});

使用NProgress库

NProgress是一个轻量级的进度条库，可以方便地集成到项目中。

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

// 配置NProgress
NProgress.configure({
  showSpinner: false,
  trickleSpeed: 200
});

// 在路由守卫中使用
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

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

自定义进度条组件

可以创建一个自定义的进度条组件，通过监听请求状态来控制显示和隐藏。

<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);
        }
      }, 200);
    },
    finish() {
      this.progress = 100;
      setTimeout(() => {
        this.progress = 0;
      }, 500);
    }
  }
};
</script>

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

使用vue-router的导航守卫

结合vue-router的导航守卫，可以在页面切换时显示进度条。

import NProgress from 'nprogress';

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

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

使用Vuex管理进度状态

如果项目中使用Vuex，可以通过Vuex来管理进度条的状态。

vue请求实现进度条

// store.js
export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    setLoading(state, isLoading) {
      state.isLoading = isLoading;
    }
  }
});

// 在组件中使用
<template>
  <div v-if="isLoading" class="progress-bar"></div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['isLoading'])
  }
};
</script>