axios是Vue用來實作異步通信的，從Vue.js 2.0 版本開始推薦使用 axios 來完成 ajax 請求。
axios 其實是一個網絡請求庫（内部封裝ajax）
Github開源位址： https://github.com/axios/axios
常用于結合網絡資料開發應用，如接受外部api開發應用等。
先看一下格式：
學過jquery的話會發現axios的實作和jqurey的ajax很像，甚至感覺比後者還要簡單一點，先解釋一下這個格式：
1.使用axios
第一句是引入axios，
第二句是使用get方式擷取資料，括号中的是get參數，then中的第一個function是成功通信的回調函數（就是通信成功後執行的函數），第二個function是通信失敗時的回調函數（就是通信失敗後執行的函數）
ajax通信隻有兩個結果，要麼成功要麼失敗
第三句是使用post方式擷取資料，傳遞參數使用的是 { 鍵：值 } 對象的形式，其他的都與get一樣
來看一個例子：
（為了針對axios，是以并沒有使用vue的其他功能，解釋在注解）
<!-- 官網提供的 axios 線上位址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随機笑話
請求位址:https://autumnfish.cn/api/joke/list
請求方法:get
請求參數:num(笑話條數,數字)
響應内容:随機笑話
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6") //?num=6是參數，代表請求的笑話數
.then(function (response) {
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2:使用者注冊
請求位址:https://autumnfish.cn/api/user/reg
請求方法:post
請求參數:username(使用者名,字元串)
響應内容:注冊成功或失敗
*/
document.querySelector(".post").onclick = function () {
//{username:"小笨豬"}是參數，代表要接入的使用者 *post方法傳遞的參數必須是對象形式
axios.post("https://autumnfish.cn/api/user/reg",{username:"小笨豬"})
.then(function(response){
console.log(response);
},function (err) {
console.log(err);
})
}
</script>
</body>
結果：
2.使用axios+Vue
在vue中使用axios
首先需要注意幾點：
下面是代碼，注意看注解
<body>
<div id="app">
<input type="button" value="擷取笑話" @click="getJoke">
<p> {{ joke }}</p>
</div>
<!-- 官網提供的 axios 線上位址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 開發環境版本，包含了有幫助的指令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口:随機擷取一條笑話
請求位址:https://autumnfish.cn/api/joke
請求方法:get
請求參數:無
響應内容:随機笑話
*/
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑話"
},
methods: {
getJoke:function(){
// console.log(this.joke);
//将外部this占存為that
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function(response){
// console.log(response)
console.log(response.data);
// console.log(this.joke);
that.joke = response.data;
},function (err) { })
}
},
})
</script>
</body>
結果：