vue3封装axios全局使用

在Vue3中，我们可以将axios封装成一个插件并注册到全局，以便在任何组件中都可以使用它。

下面是一个简单的axios封装插件示例：

// axios.js

import axios from 'axios'

const myAxios = {}

myAxios.install = (app) => {
  app.config.globalProperties.$axios = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 5000,
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

export default myAxios

在上面的示例中，我们将axios实例化，并将其作为Vue3插件的一部分公开为全局属性。这样，我们可以在任何组件中使用`this.$axios`来调用我们的API。

为了使用这个插件，我们需要在main.js中引用它并将其注册：

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import myAxios from './axios'

const app = createApp(App)

app.use(myAxios)

app.mount('#app')

现在我们已经成功注册了axios插件，并且可以在组件中使用它：

// MyComponent.vue

export default {
  methods: {
    fetchData() {
      this.$axios.get('/data').then(response => {
        console.log(response.data)
      }).catch(error => {
        console.error(error)
      })
    }
  }
}

在上面的示例中，我们在组件的方法中使用了`this.$axios`来获取数据。这使得我们可以轻松地在任何组件中使用我们的API。