vue3 - 全局配置 axios 与使用

# vue3 全局配置 axios 与使用

# 为什么要全局配置 axios

在实际项目开发中，几乎每个组件中都会用到 axios 发起数据请求。此时会遇到如下两个问题：

① 每个组件中都需要导入 axios（代码臃肿）

② 每次发请求都需要填写完整的请求路径（不利于后期的维护）

# vue2 与 vue3 配置 axios 的不同之处

在 vue2 中会习惯性的把 axios 挂载到全局，以方便在各个组件或页面中使用 this.$http 请求接口。但是在 vue3 中取消了 Vue.prototype，在全局挂载方法和属性时，需要使用官方提供的 globalPropertiesAPI。

# 第一步：导入 axios 并进行挂载

const app = createApp(App)

import axios from "axios"

app.config.globalProperties.$http = axios

# 第二步：在组件中获取 getCurrentInstance 实例，使用实例中已挂载的 $http 方法

import { onMounted, getCurrentInstance} from "vue";

const {proxy} = getCurrentInstance()

onMounted(async()=>{

  const res=await proxy.$http.get('api/v1/topics')

  console.log(res)

})