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指向的對象了。
效果：