Vue3 setup语法糖下的axios全局设置教程

Vue3 setup语法糖下的axios全局设置教程

前言

在Vue3的组件式API开发下，this关键词不再适用，网上很多配置axios教程都是以Vue2为基础的，在Vue3下不再适用。
近期尝试用组件式API风格写项目，在配置全局axios就遇到了这个问题。
经过我反复尝试，查阅官网的文档，终于有了以下解决方法：

Vue2 下的axios全局配置

//main.js
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios,axios);

在Vue文件中的调用：

//App.vue
<script>
this.axios.get("/api").then(res =>{
	...
})
</script>

Vue3下的axios全局配置

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios"

const app = createApp(App)

app.config.globalProperties.$http = axios
axios.defaults.baseURL = "http://127.0.0.1:5000"
axios.defaults.timeout = 200
// POST数据请求格式设置 可忽略
axios.defaults.headers.post["Content-Type"] = 'application/json'

在Vue文件中的调用：

//App.vue
<script setup>
import {onMounted, ref, getCurrentInstance} from "vue"

const {proxy} = getCurrentInstance()

//调用axios最好在onMounted()
proxy.$http.get("/api").then(res =>{
      			...  
)
</script>