vue-axios是vue中使用较多的数据请求方式,下面就来介绍一下vue-axios的使用方式
首先我们需要先加载vue-axios的依赖
进入项目,打开CMD 输入:
npm install axios
这是安装一般使用的axios的语句,为了加载vue-axios我们需要再次输入
npm install --save axios vue-axios
等命令执行完毕之后,就可以打开我们的JS入口文件,添加vue-axios的依赖了,个人推荐使用下面这种
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
不需要修改config也不需要添加原型链,直接可以使用
然后是vue-axios的语法
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中添加一个空的容器如
data () {
return {
topic:[]
}
},
topic:[]就是我们所需要的容器,然后在axios请求中将需要用到的bbsTopic添加到容器中
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循环加载它
<ul>
<li v-for="topics in topic">
{{ topics.id }}
</li>
</ul>
标签代码中,topic就是我们的容器名,topics是我们用来取出容器中数据的名字,这样,vue-axios获取到的数据就可以直接使用了
谢谢观看
我是你们的狐狸