vue3封装axios

Vue3 推荐使用 `@vue/axios` 进行 Axios 的封装。

首先，安装 `@vue/axios` 和 `axios`：

npm install axios @vue/axios

然后在 `main.js` 中进行配置：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHistory } from 'vue-router'
import { provide, onGlobalSetup } from '@vue/composition-api'
import VueAxios from '@vue/axios'

const app = createApp(App)

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ]
})

const pinia = createPinia()

app.use(router)
app.use(pinia)
app.use(VueAxios)

onGlobalSetup(() => {
  // 对 axios 进行一些配置（例如设置请求头、请求超时等）
  app.config.globalProperties.$axios.defaults.baseURL = 'https://api.example.com'
})

app.mount('#app')

在组件中使用：

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const { $axios } = this

    const fetchData = async () => {
      try {
        const response = await $axios.get('/data')
        console.log(response.data)
      } catch (error) {
        console.error(error)
      }
    }

    return {
      fetchData
    }
  }
})

这样就可以在组件中通过 `$axios` 调用 Axios 方法了。

更多详细的使用方法可以参考官方文档：https://github.com/vuejs/vue-axios。