一、axios在vue组件中直接发起请求

vue组件：

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <button @click="getInfo">发起 GET 请求</button>
    <button @click="postInfo">发起 POST 请求</button>
  </div>
</template>

<script>
// 1. 导入axios
import axios from 'axios'

// 2. 发起请求
export default {
  methods: {

    // 发起GET请求
    async getInfo() {
      const { data: res } = await axios.get(''http://www.liulongbin.top:3006/api/get')
      console.log(res)
    },

    // 发起POST请求
    async postInfo() {
      const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', age: 20 })
      console.log(res)
    }

  }
}
</script>

二、在vue项目中全局配置axios

1. • 简化axios的导入

上面的方法，需要在每个组件中都导入axios，太麻烦。

如果在main.js文件中进行如下配置：把 axios 挂载到 Vue.prototype 上，供每个 .vue 组件的实例直接使用，之后的vue组件中都不需要再单独导入axios，可以直接调用 this.$http.xxx

// 导入axios
import axios from 'axios'

// 把 axios 挂载到 Vue.prototype 上（起名叫$http，或其他名字均可），供每个 .vue 组件的实例直接使用
Vue.prototype.$http = axios

// 今后，在每个 .vue 组件中要发起请求，直接调用 this.$http.xxx

vue组件：

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <button @click="getInfo">发起 GET 请求</button>
    <button @click="postInfo">发起 POST 请求</button>
  </div>
</template>

<script>
// 不需要在导入axios，直接发起请求
export default {
  methods: {

    // 发起GET请求
    async getInfo() {
      // 通过组件实例访问到原型上的$http属性的get方法
      const { data: res } = await this.$http.get(''http://www.liulongbin.top:3006/api/get')
      console.log(res)
    },

    // 发起POST请求
    async postInfo() {
      const { data: res } = await this.$http.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', age: 20 })
      console.log(res)
    }

  }
}
</script>

缺点：如果把 axios 挂载到 Vue 原型上，无法实现 API 接口的复用。

2. 简化URL

按照之前的写法，如果URL发生更改，那么需要将每个vue组件中的URL都进行修改。

可以在main.js文件全局配置 axios 的请求根路径，在vue组件的URL中就不需要再写完整的请求地址

// 全局配置 axios 的请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

vue组件：

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <button @click="getInfo">发起 GET 请求</button>
    <button @click="postInfo">发起 POST 请求</button>
  </div>
</template>

<script>
// 不需要在导入axios，直接发起请求
export default {
  methods: {

    // 发起GET请求
    async getInfo() {
      // 通过组件实例访问到原型上的$http属性的get方法
      // 不需要再写完整的请求地址
      const { data: res } = await this.$http.get('/api/get')
      console.log(res)
    },

    // 发起POST请求
    async postInfo() {
      const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 20 })
      console.log(res)
    }

  }
}
</script>