1.axios
- axios必须先导入才可以使用
- 使用get和post方法可以发送对应请求
- then方法中的回调函数会在请求成功或失败时触发
网络请求库:
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
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);
})
}
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>
2.axios+vue
- axios中的this函数已经改变,无法访问到data内容
- 把this保存起来,回调函数中直接使用保存的this即可
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{ joke }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
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;
},function(err){
})
}
}
})
</script>
3.网络应用:天知道
两个功能:1.回车查询;2.点击查询