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.h t t p . g e t 或 t h i s . http.get或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接口的复用。
