vue3项目实战的请求接口问题 配置全局axios的nprogress顶部进度条

在Vue 3项目中，你可以使用axios作为HTTP客户端，并结合nprogress来添加顶部进度条。以下是如何配置全局axios以使用nprogress的步骤和示例代码：

1. 安装nprogress和axios：

npm install nprogress axios

2. 在项目中引入nprogress并设置其样式：

// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
 
const app = createApp(App)
 
// 配置axios
axios.interceptors.request.use(config => {
  NProgress.start() // 每次请求前启动进度条
  return config
})
 
axios.interceptors.response.use(response => {
  NProgress.done() // 每次响应后完成进度条
  return response
})
 
app.config.globalProperties.$axios = axios
 
app.mount('#app')

3. 在组件中使用全局配置的axios发送请求：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>
 
<script>
export default {
  name: 'YourComponent',
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$axios.get('/your-api-endpoint')
        // 处理响应数据
      } catch (error) {
        // 处理错误
      }
    }
  }
}
</script>

在这个配置中，每次请求发起时，NProgress会自动显示进度条，而当响应返回后，进度条会自动完成并隐藏。这样可以为用户提供更好的加载过程可视化。