Vue---- Vue 3.x 中全局配置axios

---

vue 3.x 中全局配置 axios

0 安装 axios

npm i axios

1. 为什么要全局配置 axios

在实际项目开发中，几乎每个组件中都会用到 axios 发起数据请求。

此时会遇到如下两个问题：

① 每个组件中都需要导入 axios（代码臃肿）
② 每次发请求都需要填写完整的请求路径（不利于后期的维护）

2. 如何全局配置 axios

在 main.js 入口文件中，通过 app.config.globalProperties全局挂载 axios。

import { createApp } from 'vue'
// import App from './App.vue'
// import App from './components/myEvent/App.vue'
// import App from './components/v-model/App.vue'
// import App from './components/watch/App.vue'
// import App from './components/live/App.vue'
// import App from './components/fatherSon/App.vue'
// import App from './components/brother/App.vue'
import App from './components/grand/App.vue'


// 导入axios
import axios from 'axios'

import './index.css'

// 创建 Vue 实例对象
const app = createApp(App)
// 设置 axios 的请求根路径
axios.defaults.baseURL = 'https://www.escook.cn'
// 将 axios 挂载为 app 的全局自定义属性
// 每个组件可以通过 this 直接访问到全局挂载的自定义属性
app.config.globalProperties.$http = axios

app.mount('#app')

3. 发起get请求

<template>
  <div>
    <h1>App 组件</h1>
    <hr>
    <button @click="get">发起get请求</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    async get() {
      // axios 返回的为 Promise 对象
      // 对返回的对象进行解构，获取其中的 data
      // 第一个参数为请求的路径，第二次参数为请求携带的数据
      const { data: res } = await this.$http.get( '/api/get', {
        params: {
          name: 'zs',
          age: 33
        }
      } )
      console.log( res )
    }
  }
}
</script>

<style>

</style>

4. 发起post请求

<template>
  <div>
    <h1>App 组件</h1>
    <hr>
    <button @click="get">发起get请求</button>
    <button @click="post">发起post请求</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    async get() {
      // axios 返回的为 Promise 对象
      // 对返回的对象进行解构，获取其中的 data
      // 第一个参数为请求的路径，第二次参数为请求携带的数据
      const { data: res } = await this.$http.get( '/api/get', {
        params: {
          name: 'zs',
          age: 33
        }
      } )
      console.log( res )
    },
    async post() {
      // 第一个参数为请求地址
      // 第二个参数为请求携带的数据
      const { data: res } = await this.$http.post( '/api/post', {
        name: 'zs',
        gender: '男'
      } )
      console.log(res)
    }
  }
}
</script>

<style>

</style>