Vue---- configuración global axios en Vue 3.x

---

Configuración global de axios en vue 3.x

0 instalar axios

npm i axios

1. Por qué configurar axios globalmente

En el desarrollo de proyectos reales, casi todos los componentes utilizarán axios para iniciar solicitudes de datos.

En este punto, se encontrará con los siguientes dos problemas:

① Axios debe importarse en cada componente (el código está inflado)
② Cada vez que envía una solicitud, debe completar la ruta de solicitud completa (no es propicio para el mantenimiento posterior)

2. Cómo configurar axios globalmente

En el archivo de entrada main.js app.config.globalProperties, monte axios globalmente.

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. Iniciar una solicitud de obtención

<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. Iniciar una solicitud de publicación

<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>