当前位置：首页 > VUE

vue请求实现进度条

2026-03-27 06:18:03VUE

使用 Axios 拦截器实现请求进度条

在 Vue 项目中安装 Axios 作为 HTTP 客户端：

npm install axios

创建 Axios 实例并添加请求/响应拦截器：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com'
})

// 请求拦截器
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)
})

export default instance

集成 NProgress 进度条库

安装 NProgress 进度条库：

vue请求实现进度条

npm install nprogress

在 main.js 中导入样式：

import 'nprogress/nprogress.css'

结合 Vue Router 实现路由进度条

在 router.js 中添加导航守卫：

vue请求实现进度条

import NProgress from 'nprogress'

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

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

自定义进度条样式

在 CSS 中覆盖默认样式：

#nprogress .bar {
  background: #42b983 !important;
  height: 3px !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px #42b983, 0 0 5px #42b983 !important;
}

#nprogress .spinner-icon {
  border-top-color: #42b983 !important;
  border-left-color: #42b983 !important;
}

使用 Element UI 进度条组件

对于使用 Element UI 的项目：

<template>
  <el-progress 
    :percentage="progressPercent" 
    :status="progressStatus"
    v-if="showProgress"
  />
</template>

<script>
export default {
  data() {
    return {
      progressPercent: 0,
      showProgress: false
    }
  },
  methods: {
    updateProgress(percent) {
      this.progressPercent = percent
      this.showProgress = percent < 100
    }
  }
}
</script>

上传/下载进度监控

对于文件上传/下载操作：

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

这些方法可以根据项目需求单独使用或组合使用，实现完整的请求进度展示功能。