vue复习-vue-axios从加载到使用

vue-axios是vue中使用较多的数据请求方式，下面就来介绍一下vue-axios的使用方式

首先我们需要先加载vue-axios的依赖

进入项目，打开CMD 输入：

[code]npm install axios

这是安装一般使用的axios的语句，为了加载vue-axios我们需要再次输入

[code]npm install --save axios vue-axios

等命令执行完毕之后，就可以打开我们的JS入口文件，添加vue-axios的依赖了，个人推荐使用下面这种

[code]import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

不需要修改config也不需要添加原型链，直接可以使用

然后是vue-axios的语法

[code]this.axios({
method:'post',
data:{},
url:apiUrl
}).then((response) =>{          //这里使用了ES6的语法
console.log(response)          //请求成功返回的数据
}).catch((error) =>
console.log(error)//请求失败返回的数据
)

主要的就是post方法，gei方法和post没什么不同，而且在这里不推荐使用get，因为相比post，get的安全性确实有所缺失

console打印后发现数据请求成功，然后呢该如何使用他呢，就需要在data方法里动一动手脚，假设返回的数据形式如下

我们需要取用bbsTopic中的数据，首先需要在data中添加一个空的容器如

[code]  data () {
return {
topic:[]
}
},

 topic:[]就是我们所需要的容器，然后在axios请求中将需要用到的bbsTopic添加到容器中

[code]   this.axios({
method:'post',
data:{},
url:apiUrl
}).then((response) =>{
this.topic=response.data.data.bbsTopic  //找到需要添加的bbsTopic使this.topic等于他
console.log(this.topic)                 //打印添加后的this.topic
}).catch((error) =>
console.log(error)//请求失败返回的数据
)

然后在页面标签中使用v-for循环加载它

[code]     <ul>
<li v-for="topics in topic">
{{ topics.id }}
</li>
</ul>

 标签代码中，topic就是我们的容器名，topics是我们用来取出容器中数据的名字，这样，vue-axios获取到的数据就可以直接使用了

谢谢观看

我是你们的狐狸