此章節內容包括：
1、Axios中的get請求
2、Axios中的post請求
1、Axios的get請求
ajax的作用是與服務端進行數據交互，並且從服務端拿到所需要的數據，說白了就是兩句話：
發送請求，攔截響應。
這裏的 axios 的作用和 ajax 的作用基本上是一樣的，用法上可能會有點區別。
官方一點的說法是：axios 是一個基於 Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，他本身具有以下特性：
- 從瀏覽器中創建 XMLHttpRequest
- 從 node.js 發出 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求和響應數據
- 取消請求
- 自動轉換JSON數據
- 客戶端支持防止 CSRF/XSRF
使用方法
1、安裝
npm install axios
2、引入加載
在使用到axios 以 .vue 結尾的組件內引入，如 HelloWorld.vue
import axios from 'axios'
3、將 axios 全局掛載到 VUE 原型上
直接在其中一個組件上輸入以下代碼就可以，後面可以使用 this.$http 發送請求
Vue.prototype.$http = axios
寫在一起就是：
<template>
<div class="hello">
<h3>我是axios用來發送請求，攔截響應</h3>
</div>
</template>
<script>
Vue.prototype.$http = axios
import axios from 'axios'
export default {
name: 'sendget',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
}
</script>
4、發出請求，以cnode社區API爲例子
使用傳統的function寫法：
<template>
<div class="hello">
<h3>我是axios用來發送請求，攔截響應</h3>
<button v-on:click="getDate()">發送請求</button>
<ul>
<li v-for="item in items">{{items.title}}</li>
</ul>
</div>
</template>
<script>
//這裏用到了vue，記得也要引入一下
import Vue from "vue";
import axios from "axios";
Vue.prototype.$http = axios;
export default {
name: "sendget",
data() {
return {
items: []
};
},
methods: {
getDate() {
//2、提前將此處的this賦值給self，因爲這時候的this還是vue實例，下面通過self就可以拿到vue實例了
var self = this;
this.$http
.get("https://cnodejs.org/api/v1/topics")
//成功後調用的函數
.then(function(res) {
//1、此處方法內的this並不代表當前vue實例，代表的是window對象
//this.items = res.data.data;
self.items = res.data.data;
console.log(res.data.data);
})
//失敗後調用的函數
.catch(function(err) {
console.log(err);
});
}
}
};
</script>
但是推薦使用 es6 的寫法，上面的可以寫成下面的：
<template>
<div class="hello">
<h3>我是axios用來發送請求，攔截響應</h3>
<button v-on:click="getDate()">發送請求</button>
<ul>
<li v-for="item in items">{{items.title}}</li>
</ul>
</div>
</template>
<script>
//這裏用到了vue，記得也要引入一下
import Vue from "vue";
import axios from "axios";
Vue.prototype.$http = axios;
export default {
name: "sendget",
data() {
return {
items: []
};
},
methods: {
getDate() {
var self = this;
//這裏直接在api後面寫參數，寫在params裏面
this.$http.get("https://cnodejs.org/api/v1/topics", {
params: {
page: 1,
limit: 20
}
});
//或者直接把參數寫在api上，效果也是一樣的
//this.$http.get('https://cnodejs.org/api/v1/topics?page=1&limit=20')
//使用ES6語法寫的
.then(res => {
this.items = res.data.data
console.log(res)
})
.catch(err => {
console.log(err)
})
}
}
};
</script>
這裏使用CNODE社區官方的API爲例展開學習
獲取主題列表API：https://cnodejs.org/api/v1/topics
參數：
page - 頁碼
limit - 每頁顯示的數量
結果爲：
2、Axios中的post請求
POST傳遞數據有兩種格式：
第一種：formdata 格式：xxx/xxx?page=1&limit=48
第二種：xwwwformurlencoded { page: 1,limit: 10 }
在axios中，post請求接收的參數必須是formdata
用qs插件將post傳過去的數據是第2種格式，要將這個數據通過 qs.stringify() 處理一下，轉換爲第1種才能接收到
用法：
1、先下一個qs插件
npm install qs
2、引入一下 qs
import qs from 'qs'
qs.stringify() 可以對post過去的數據做處理
3、處理一下
<template>
<div class="hello">
<h3>我是axios用來發送請求，攔截響應</h3>
<button v-on:click="getDate()">GET發送請求</button>
<button v-on:click="postDate()">POST發送請求</button>
<ul>
<li v-for="item in items">{{items.title}}</li>
</ul>
</div>
</template>
<script>
//這裏用到了vue，記得也要引入一下
import Vue from "vue";
import axios from "axios";
//引入一下 qs
import qs from "qs";
Vue.prototype.$http = axios;
export default {
name: "sendget",
data() {
return {
items: []
};
},
methods: {
//使用postDate接受請求
postDate() {
this.$http
//post請求裏面不能直接在連接後面寫參數，並且傳遞的數據需要qs.stringify()處理一下
.post("https://cnodejs.org/api/v1/topics",qs.stringify({
params: {
page: 1,
limit: 20
}
})
)
.then(res => {
this.items = res.data.data;
console.log(res);
})
.catch(err => {
console.log(err);
});
}
}
};
</script>