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即可
◆和本地应用的最大区别就是改变了数据来源
81
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
