axios挂载到vue项目中的一些优化问题
- 1.准备工作
- 2.具体案例
- 3.问题引出
- 4.解决方法--把axios挂载到Vue的原型上并配置请求根路径。
- 5.了解直接把axios挂在到Vue原型上的缺点
1.准备工作
用vue cli创建一个vue项目，然后再components目录下创建两个vue组件，分别是Right.vue和Left.vue。文件的代码如下
Right.vue
代码语言：javascript复制<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:
代码语言：javascript复制<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:
代码语言：javascript复制<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请求
代码语言：javascript复制<button @click="getInfo">发起GET请求</button>然后我们需要在Left组件的<script>里面添加如下的代码：
代码语言：javascript复制<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请求的话，我们添加如下的代码
代码语言：javascript复制 <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文件，添加如下的代码：
代码语言：javascript复制import axios from 'axios'
Vue.prototype.$http = axios这里的http这个名字可以叫其他的名字，但我们一般都叫http。
然后我们的组件里面就可以不用再import去导入axios了。直接this.
http.post去调用就可以了。如下 Left.vue里面：
代码语言：javascript复制<script>
export default {
methods: {
getInfo () {
this.$http.get('http://www.liulongbin.top:3006/api/get').then(
(res) => {
console.log(res.data)
}
)
}
}
}
</script>Right.vue里面：
代码语言：javascript复制<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里面添加如下的配置：
代码语言：javascript复制// 全局配置axios的请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'之后组件中就不用再去写完整的请求地址了，如下 Right.vue:
代码语言：javascript复制<script>
export default {
methods: {
postInfo () {
this.$http.post('/api/post', { name: 'zs', age: 20 }).then(
(res) => { console.log(res.data) }
)
}
}
}
</script>Left.vue
代码语言：javascript复制<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用来获取图书列表的数据 添加的代码如下：
代码语言：javascript复制<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接口的复用。
