1.axios
必须先导入才能使用
使用get或者post方法即可发送对应请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容或错误信息
<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>
// 两条连接均已失效,看代码逻辑即可
/*
接口1:随机笑话:
请求地址:http://www.autumnfish.cn/api/joke/list
请求方法:get
请求参数num(笑话条数,字数)
相应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("http://www.autumnfish.cn/api/joke/list?num=3").then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
})
}
/*
接口2:用户注册:
请求地址:http://www.autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
相应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function(){
axios.post("http://www.autumnfish.cn/api/user/reg",{username:"jack"}).then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
2.axios+vue
axios回调函数中的this已经改变,无法访问data中数据
把this保存起来,回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源
<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>
<!-- 官网提供axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话:
请求地址:http://www.autumnfish.cn/api/joke
请求方法:get
请求参数num(笑话条数,字数)
相应内容:随机笑话
*/
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function(){
console.log(this.data);//控制台打印很好笑的笑话
//两个this不一样说明this所指向的会变
//那就将this赋值that
var that = this;
axios.get("http://www.autumnfish.cn/api/joke").then(function(response){
console.log(response.data);
//利用that调用
//console.log(this.joke);//控制台打印undefined
that.joke = response.data;
},function(err){ })
}
}
})
</script>
</body>
天知道案例