文章目錄
-
- axios 簡述
- axios 對比與ajax
-
-
- 優缺點
-
- axios 的使用
-
- axios的安裝
- axios的使用
-
-
- 正常使用
- axios API
-
- axios的并發（axios.all,axios.spread）
- 請求方法别名
-
- 傳值常見的問題
- 總結
要想學會一個東西，先深刻了解這個東西才是最重要的！！！
axios是通過promise實作對ajax技術的一種封裝,類似與jQuery對ajax的封裝一樣，但是我們使用vue開發單純使用ajax卻要引入整個JQuery非常的不合理（采取個性化打包的方案又不能享受CDN服務）不推薦！！！
axios 簡述
axios 其實是封裝後的ajax，本質上也是對原生XHR的封裝，隻不過它是Promise的實作版本，符合最新的ES規範。
axios 具有的特性:
1.從浏覽器中建立 XMLHttpRequest
2.支援 Promise API
3.用戶端支援防止CSRF
4.提供了一些并發請求的接口（重要，友善了很多的操作）
5.從 node.js 建立 http 請求
6.攔截請求和響應
7.轉換請求和響應資料
8.取消請求
9.自動轉換JSON資料
PS:防止CSRF:簡單的來說就是讓你的每個請求都帶一個從cookie中拿到的key, 根據浏覽器同源政策，假冒的網站是拿不到你cookie中得key的，這樣，背景就可以輕松辨識出這個請求是否是使用者在假冒網站上的誤導輸入，進而采取正确的政策。更多的可以看這篇文章詳情
axios 對比與ajax
ajax 代碼片段:
$.ajax({
url:'/frontMenu',
type:'post',
dataType:'json',//xml,html,script,jsonp,text類型
data:{
menuName:this.menuName //按具體子產品是否需要傳參
},
success:function(response){
console.log(response)
}
})
(ajax實作了網頁局部資料的重新整理)
axios 代碼片段(這裡我用的axios API):
axios({
url:'/frontMenu',
method:'post',
responseType:'json',//預設為json，
data:{
menuName:this.menuName //按具體子產品是否需要傳參
} })
.then(funtion(response){
console.log(response)
})
.catch(function(error){
console.log(error)
})
補充一下axios的responseType:
| 值(responseType) | 資料類型 |
|---|---|
| ’ ’ | DOMString |
| arraybuffer | ArrayBuffer對象(類型化數組) |
| blob | Blob對象（存放二進制資料外還可以設定這個資料的MINE類型） |
| document | Document對象 |
| json | JavaScript object,parsed from a JSON string returned by the server |
| text | DOMString |
優缺點
ajax:
1.ajax主要針對的是MVC的程式設計模式,對于如今的前端的MVVC架構仍有所欠缺
2.基于原生的XHR開發，XMR本身的架構不太清晰，雖然已經有fetch(但是axios已經幫我們封裝的足夠友善了為什麼我們還要花費大量力氣去學習fetch而且fetch使用起來并不是那麼舒服，需要進行封裝。)
axios就是上方提到的特性啦，而且其提供了并發的封裝以及體積小呀
ps:至于fetch 使用的是ES6中的promise對象,并且是基于promise進行設計的 但它不是ajax的封裝而是原生的js，并沒有使用XMLHttpBequest對象。
講到這裡大家是不是就很想知道具體項目中如何去使用axios呢 （๑￫‿ฺ￩๑）
axios 的使用
Vue 原本有一個官方推薦的 ajax 插件 vue-resource，但是自從 Vue 更新到 2.0 之後，官方就不再更新 vue-resource，所有目前主流的 Vue 項目，都選擇 axios 來完成 ajax 請求
axios的安裝
引入axios 在對應的檔案目錄下npm install --save axios vue-axios
或
使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
法一（修改原型鍊）：
在mian檔案裡面
import axios from 'axios'
Vue.prototype.$axios = axios //改變
在元件使用的時候
that.$axios
.post("/frontMenu",{
menuName:this.menuName //按具體子產品是否需要傳參
})
.then(response => {
console.log(response)
})
.catch(function(error) {
console.log(error)
});
法二（結合vue-axios）
vue-axios是按照vue插件的方式去寫的。那麼結合vue-axios，就可以去使用vue.use方法了
在main檔案裡
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
元件中使用
this.axios.post('/frontMenu',{
menuName:this.menuName //按具體子產品是否需要傳參
})
.then((response)=>{
console.log(response)
}).catch((response)=>{
console.log(error)
});
axios的使用
正常使用
this.axios.post('/frontMenu',{
menuName:this.menuName //按具體子產品是否需要傳參
})
.then((response)=>{
console.log(response)
}).catch((response)=>{
console.log(error);
})
ps:get方法,把post換成get就好啦 這裡就不單獨列出了
axios API
可以通過向 axios 傳遞相關配置來建立請求。
this.axios({
method:'post',
url:'/frontMenu',
data:{
menuName:this.menuName //按具體子產品是否需要傳參
},
//修改請求頭
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
.catch(function(error) {
console.log(error)
});
請求頭用法
1.Content-Type: application/json
這種是axios預設的請求資料類型，我們隻需将參數序列化json字元串進行傳遞即可，
無需多餘的配置
2.Content-Type: multipart/form-data
<input>元素的type屬性必須為file
3.Content-Type:application/x-www-form-urlencoded
請求體中的資料會以普通表單形式（鍵值對）發送到後端
axios的并發（axios.all,axios.spread）
let axiosList=[
axios.get('url1',{params:xxx,dateType:'JSON'}),
axios.get('url2',{params:xxx,dateType:'TEXT'}),
]
axios.all(axiosList).then(axios.spread(function(res1,res2){
console.log(res1,res2)//分别是兩個請求的傳回值
})
請求方法别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
ps：在使用别名方法時， url、method、data 這些屬性都不必在配置中指定。
傳值常見的問題
1.前台傳遞的時候為鍵值對，背景難接到
解決方案：使用axios自帶的qs庫對參數序列化
在需要用的元件中先引入
import Qs from "qs";
對參數進行序列化
let data= Qs.stringify({
userName:this.userName,
passWord:this.passWord
})
this.axios({
method:'post',
url:'/frontMenu',
data:data
})
.then((response)=>{
console.log(response)
})
.catch(function(error) {
console.log(error)
});
console.log(data)
結果:userName=哈哈哈哈&&passWord=1234567
完美解決問題 (ฅ´ω`ฅ)
補充：
qs.parse()将URL解析成對象的形式
那當我們需要傳遞數組的時候，我們可以通過下面方式進行處理：
預設情況下，它們給出明确的索引，如下代碼：
qs.stringify({ a: [‘b’, ‘c’, ‘d’] });
// ‘a[0]=b&a[1]=c&a[2]=d’
也可以進行重寫這種預設方式為false
qs.stringify({ a: [‘b’, ‘c’, ‘d’] }, { indices: false });
// ‘a=b&a=c&a=d’
當然，也可以通過arrayFormat 選項進行格式化輸出，如下代碼所示：
qs.stringify({ a: [‘b’, ‘c’] }, { arrayFormat: ‘indices’ })
// ‘a[0]=b&a[1]=c’
qs.stringify({ a: [‘b’, ‘c’] }, { arrayFormat: ‘brackets’ })
// ‘a[]=b&a[]=c’
qs.stringify({ a: [‘b’, ‘c’] }, { arrayFormat: ‘repeat’ })
// ‘a=b&a=c’
2.上傳圖檔
解決方案：需要更改請求頭并用表單送出
uploadFile(file) {
this.formDate.append("file", file.file);
},
submitUpload() {
this.formDate = new FormData();
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
that.axios
.post("/api/pictureUpload", this.formDate, config)
.then(response => {
console.log(response);
})
.catch(response => {
console.log(response);
});
}
ps:我用的是element-ui中的圖檔上傳控件
總結
axios的選擇符合目前前端開發的潮流，并且體積小易上手。至于更多關于axios配置的介紹留在以後吧(๑˘ ˘๑)。本文闡述了axios以及axios的基本用法，還有axios+vuex封裝的用法以後會出的！！！
本文略顯臃腫謝謝大家觀看 ꒰๑´•.̫ • `๑꒱
![03-Vue入門系列之Vue清單渲染及條件渲染實戰[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)