11. Vue Axios异步通信
什么是axios?
Axios是一个开源的可以在浏览器端和Node.js的异步通信框架，主要功能是实现AjAx的异步通信。
他不属于vue里面的，而是经常与vue一起使用实现ajax异步通信
安装
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Features
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
- 执行
GET请求
Axios基本格式
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
</div>
<script>
new Vue({
el: "#app",
//在data中定义变量和初始值
data:{
},
//调用定义的方法，在页面渲染前执行
created () {
},
//编写具体的方法
methods: {
}
})
</script>
</body>
第一步：伪造json数据
{
"success":"true",
"code":20000,
"message":"成功",
"data": {
"items": [
{"name":"xuan","age":18},
{"name":"jieshen","age":30},
{"name":"xuyuhao","age":12}
]
}
}
第二步：编写代码拿到数据
- 在then中通过Response拿到数据赋值给到data中定义的空数组，然后在页面展示模块将数据遍历取出来
- 在created方法中要调用该方法才能在页面渲染前执行
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<!-- 把userList中的数据在页面中显示 -->
<h3>{{userList}}</h3>
<table>
<tr v-for="user in userList">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app",
//在data中定义变量和初始值
data:{
//定义变量值是一个空的数组，对应data.json中数据
userList:[]
},
//调用定义的方法，在页面渲染前执行
created () {
this.getUserList()
},
//编写具体的方法
methods: {
//创建一个方法查询所有用户的数据
getUserList(){
//使用axios发送ajax请求
//axios.(提交方式 接口的请求路径).then().catch()
axios.get("data.json")
//请求成功后执行then方法
.then(Response => {
//通过Response获取数据赋值给到开始定义的空数组
this.userList=Response.data.data.items
console.log(this.userList)
})
//请求失败后执行catch方法
.catch(Error => {
})
}
}
})
</script>
</body>
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
