axios实现get和post
- then中的回调函数分别在请求 成功或失败 后触发
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<button id="b1" class="get">get</button>
<button id="b2" class="post">post</button>
<script>
/*
接口1：根据参数获取num条笑话
address:https://autumnfish.cn/api/joke/list?num=3
method:get
params:num(条数)
*/
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=3").then(
function(res){
console.log(res)
},
function(err){
console.log(err)
}
)
}
/*
接口2：注册
address:https://autumnfish.cn/api/user/reg
method:post
params:String username(用户名)
*/
document.querySelector("#b2").onclick = function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"test1"}).then(
function(res){
console.log(res)
},
function(err){
console.log(err)
}
)
}
</script>
</body>
axios结合vue
- axios中想要获取vue中的数据不能再用this了，因为已经变化了。故 要先将this临时存储以便使用。
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="d1">
<button @click="fun" >get joke</button>
<h2 v-text="joke"></h2>
</div>
<script>
new Vue({
el:"#d1",
data:{
joke:"好笑吧？"
},
methods:{
fun:function(){
var joke = this
axios.get("https://autumnfish.cn/api/joke/list?num=3").then(
response=function(res){
console.log(res.data.jokes[0]);
joke.joke = res.data.jokes[0];
},
function(err){
console.log(err)
}
)
}
}
})
</script>
</body>
