在vue中使用axios

1. 基本用法演示

• get 请求

  <button @click="getInfo">发起 GET 请求</button>
  

  methods: {
      async getInfo () {
          const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/get')
          console.log(res)
      }
  }
  

• post 请求

  <button @click="postInfo">发起 POST 请求</button>
  

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

2. 把 axios 挂载到 Vue 原型上并配置请求根路径

2.1 挂载

• 在 main.js 文件中引入 axios

  import axios from 'axios'
  

• 并且将axios 作为 Vue 原型的一个属性，命名为 $http

  Vue.prototype.$http = axios
  

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

  this.$http.post('地址', { 数据 })
  this.$http.get('地址')
  

2.2 配置请求根路径

• 在 挂载之前 配置根路径

  axios.defaults.baseURL = '请求根路径'
  

• 之后的路径直接写根路径之后的即可

  this.$http.get('/xxx/xxx')
  

2.3 缺点

• 不利于 API 接口的复用

2.4 main.js 源码

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

// 全局配置的 axios 根路径
axios.defaults.baseURL = 'xxx'

// 把 axios 挂载到 Vue.prototype 上 供实例直接调用
Vue.prototype.$http = axios

new Vue({
  render: h => h(App)
}).$mount('#app')