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>
結果：
