1 axios
axios：功能强大的网络请求库
导入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
导入后，就会注册一个axios全局对象，可以通过它发送请求了。
语法：
axios.get("url地址")
.then(function(response)
{
},function(err){
}
)
then方法中的回调函数会在请求成功或失败时候触发，通过回调函数的形参可以获取响应内容或者错误信息。
例子：
两个接口，一个get，一个post
<body>
<!--准备一个被vue挂载的容器div-->
<div id="app">
<input type="button" value="get请求" class="get"/>
<input type="button" value="post请求" class="post"/>
</div>
<script>
/* 接口1 随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求参数: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);
}
)
}
/*接口2 用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求参数：username(用户名，字符串)
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick=function(){
axios.post("https://autumnfish.cn/api/user/reg", {username:"jack"})
.then(function(response)
{
console.log(response);
},function(err){
console.log(err);
}
)
}
</script>
</body>
2 Vue+axios
<body>
<!--准备一个被vue挂载的容器div-->
<div id="app">
<input type="button" value="获取笑话" @click="getJoke" />
<p>
{{ joke }}
</p>
</div>
<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)
{
that.joke=response.data;
},function(err){
console.log(err);
}
)
}
}
}
)
</script>
</body>
注意，响应成功的回调函数中this已经改变了，不是指向app这个vue实例了，用that保存this，之后that.joke=response.data;，就可以显示joke了。that指向在回调函数之前this指向的对象了。
效果：