vue请求接口显示进度条

要在 Vue 中请求接口并显示进度条，可以使用 axios 库和 vue-progressbar 库。

首先，在 Vue 项目中安装 axios 和 vue-progressbar：

npm install axios vue-progressbar --save

然后，在 main.js 中引入和使用 vue-progressbar：

import VueProgressBar from 'vue-progressbar'

Vue.use(VueProgressBar, {
  color: 'green',
  failedColor: 'red',
  height: '2px'
})

接下来，在需要请求接口的组件中，使用 axios 发送请求，并在请求开始和结束时控制进度条的显示和隐藏：

<template>
  <div>
    <progress-bar :progress="progress"></progress-bar>
    <button @click="requestData">请求接口</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      progress: 0
    }
  },
  methods: {
    requestData () {
      this.progress = 0
      axios.get('http://example.com/api')
        .then(response => {
          // 处理接口返回的数据
        })
        .catch(error => {
          // 处理请求错误
        })
        .finally(() => {
          this.progress = 100
        })
    }
  }
}
</script>

在上面的代码中，我使用了一个名为 progress-bar 的组件来显示进度条，这个组件可以自定义样式。在 requestData 方法中，我在请求开始时将进度条的值设置为 0，然后在请求结束时将值设置为 100，这样就可以控制进度条的显示和隐藏了。

希望这个回答对你有帮助！