axios挂载到vue项目中一些优化问题

1.准备工作

用vue cli创建一个vue项目，然后再components目录下创建两个vue组件，分别是Right.vue和Left.vue。文件的代码如下

Right.vue

<template>
<div class="right-container">
  <h1>Right组件</h1>
</div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.right-container{
  background-color: skyblue;
  min-height: 200px;
  flex: 1;
}
</style>

Left.vue:

<template>
<div class="letf-container">
    <h1>Left组件</h1>
</div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.letf-container{
  background-color: orange;
  min-height: 200px;
  flex: 1;
}
</style>

然后再App.vue这个根组件里面使用这两个组件
App.vue:

<template>
  <div>
    <h1>App根组件</h1>
    <hr>
    <div class="box">
      <Left></Left>
      <Right></Right>
    </div>
  </div>
</template>

<script>

import Left from './components/Left.vue'
import Right from './components/Right.vue'

export default {
  components: {
    Left,
    Right
  }
}

</script>

<style lang="less" scoped>
.box{
  display: flex;
}
</style>

到这里，项目运行的效果如下：

然后，我们在项目下运行 npm i axios -S 来把axios导入到项目里面。

到这里准备工作就完成了。

2.具体案例

假设我们希望在Left组件里面有一个按钮，然后我们点击按钮可以发起一个请求。
在Left组件里面编写一个按钮发送get请求

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

然后我们需要在Left组件的<script>里面添加如下的代码：

<script>
import axios from 'axios'
export default {
  methods: {
    getInfo () {
      axios.get('http://www.liulongbin.top:3006/api/get').then(
        (res) => {
          console.log(res.data)
        }
      )
    }
  }
}
</script>

运行后点击发现GET请求没有问题：

然后，假设我们希望在右侧的Right.vue组件里面希望点击按钮发起一个POST请求的话，我们添加如下的代码

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

<script>
import axios from 'axios'
export default {
  methods: {
    postInfo () {
      axios.post('http://www.liulongbin.top:3006/api/post', {name:'zs',age:20}).then(
        (res) => { console.log(res.data) }
      )
    }
  }
}
</script>

到这里，我们运行依旧没有问题：

3.问题引出

我们会发现，每个组件中都有发送请求的需求，我们上面每个组件都要导入axios，并且发现请求的url地址都是http://www.liulongbin.top:3006开头，即项目的根路径相同。这些东西都要重复书写，比较麻烦。

4.解决方法–把axios挂载到Vue的原型上并配置请求根路径。

接下来，我们希望换一种方式来使用axios。之前我们每个组件中都要import导入axios，很麻烦。
之前学过，每一个点 .vue 组件都相当与是一个Vue实例。
既然是这样的话我们打开main.js文件，添加如下的代码：

import axios from 'axios'
Vue.prototype.$http = axios

这里的$http这个名字可以叫其他的名字，但我们一般都叫$http。

然后我们的组件里面就可以不用再import去导入axios了。直接this.$http.get或this.$http.post去调用就可以了。如下
Left.vue里面：

<script>

export default {
  methods: {
    getInfo () {
      this.$http.get('http://www.liulongbin.top:3006/api/get').then(
        (res) => {
          console.log(res.data)
        }
      )
    }
  }
}
</script>

Right.vue里面：

<script>

export default {
  methods: {
    postInfo () {
      this.$http.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', age: 20 }).then(
        (res) => { console.log(res.data) }
      )
    }
  }
}
</script>

下面再来解决一下根路径的问题，我们发现url的根路径都是http://www.liulongbin.top:3006，以后如果根路径发生改变的话，那每一个.vue的组件的url路径都要改变，对以后的维护很不友好。
我们要在main.js里面添加如下的配置：

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

之后组件中就不用再去写完整的请求地址了，如下
Right.vue:

<script>

export default {
  methods: {
    postInfo () {
      this.$http.post('/api/post', { name: 'zs', age: 20 }).then(
        (res) => { console.log(res.data) }
      )
    }
  }
}
</script>

Left.vue

<script>

export default {
  methods: {
    getInfo () {
      this.$http.get('/api/get').then(
        (res) => {
          console.log(res.data)
        }
      )
    }
  }
}
</script>

5.了解直接把axios挂在到Vue原型上的缺点

上面我说明了这中解决方法的好处，但是呢，也有缺点。
缺点就是 它无法实现API接口的复用。

下面来演示一下出现的问题：
在Right.vue里面点击button会发送post请求，如果在再Right.vue里面添加一个button用来获取图书列表的数据
添加的代码如下：

<script>

export default {
  methods: {
    postInfo () {
      this.$http.post('/api/post', { name: 'zs', age: 20 }).then(
        (res) => { console.log(res.data) }
      )
    },
    getBooks () {
      this.$http.post('/api/getbooks').then(
        (res) => { console.log(res.data) }
      )
    }
  }
}
</script>

如果这个获取图书列表的数据的api在多个组件里面使用，就要定义很多遍getBooks方法，就无法实现API接口的复用。