vue网络应用
【1】axios
接下来是关于vue的网络应用
axios -------------------- 功能强大的网络请求库
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
get请求和post请求
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// get请求
// 接口1:随机笑话
// 请求地址:https://autumnfish.cn/api/joke/list
// 请求方法:get
// 请求参数:num (笑话条数,数字)
// 响应内容:随即笑话
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
// post请求
// 接口2:用户注册
// 请求地址:https://autumnfish.cn/api/user/reg
// 请求方法:post
// 请求参数:username
// 响应内容:注册成功或失败
document.querySelector(".post").onclick=function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
总结:
◆axios必须先导入才可以使用
◆使用get或post方法即可发送对应的请求
◆then方法中的回调函数会在请求成功或失败时触发
◆通过回调函数的形参可以获取响应内容或错误信息
【2】axios和vue结合
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{
{ joke }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// get请求
// 接口:随机获取一条笑话
// 请求地址:https://autumnfish.cn/api/joke
// 请求方法:get
// 请求参数:无
// 响应内容:随即笑话
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function(){
var that=this;
axios.get("https://autumnfish.cn/api/joke")
.then(function(response){
// console.log(response.data);
that.joke=response.data; //axios中无法直接使用this,将this保存为that,就能使用了
},function(err){
console.log(err);
})
}
}
})
</script>
</body>
总结:
◆axios回调函数中的this已经改变无法访问到data中数据
◆把this保存起来,回调函数中直接使用保存的this即可
◆和本地应用的最大区别就是改变了数据来源