目录
一、Vue异步操作
在Vue中发送异步请求,本质上还是AJAX。我们可以使用axios这个插件来简化操作!
- 使用步骤
1.引入axios核心js文件。
2.调用axios对象的方法来发起异步请求。
3.调用axios对象的方法来处理响应的数据。
- axios常用方法
get:发起Get方式请求
post:发起Post方式请求
then:请求成功后的回调函数,通过response获取相应数据
catch:请求失败后的回调函数,通过error获取错误信息
二、Vue异步操作 Axios示例
Axios发送异步get/Post请求示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步操作</title>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
{{name}}
<button @click="send()">发起异步请求</button>
</div>
</body>
<script>
new Vue({
el:"#div",
data:{
name:"张三"
},
methods:{
send(){
// GET方式请求
// axios.get("testServlet?name=" + this.name)
// .then(resp => {
// alert(resp.data);
// })
// .catch(error => {
// alert(error);
// })
// POST方式请求
axios.post("testServlet","name="+this.name)
.then(resp => {
alert(resp.data);
})
.catch(error => {
alert(error);
})
}
}
});
</script>
</html>