vue3全局挂载axios

如何在vue3项目中全局配置axios

配置

main.js

npm i axios

1. 导入axiso
2. 为axios配置请求的根路径
   • axios.defaults.baseURL = 'https://api.server.com'
3. 将axios挂载为app的全局自定义属性之后，每个组件可以通过this直接访问到全局挂载的自定义属性
4. 自定义属性名可自定义，不冲突即可，这里挂载的是$http自定义属性名

代码⬇️

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

import axios from 'axios'

const app = createApp(App)

axios.defaults.baseURL = 'https://www.escook.cn'
app.config.globalProperties.$http = axios

app.mount('#app')

使用

组件以及子组件内无需导入axios

1. 使用可以通过this.$http使用，如下代码⬇️

<script>
export default {
  name: 'Post',
  methods: {
    async postInfo() {
      const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 20 })
      console.log(res)
    },
  },
}
</script>