簡單介紹
在半年前尤大就不推薦使用vue-resource了，好像我這么沒安全感的人，沒人維護(hù)的東西不敢碰。
那么axios這個是什么呢？是一個國外友人開發(fā)的基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。它有什么用法呢：
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 發(fā)出 http 請求
- 支持 Promise API
- 攔截請求和響應(yīng)
- 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
- 取消請求
- 自動轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端支持防止 [CSRF/XSRF](http://baike.baidu.com/link?* url=iUceAfgyfJOacUtjPgT4ifaSOxDULAc_MzcLEOTySflAn5iLlHfMGsZMtthBm5sK4y6skrSvJ1HOO2qKtV1ej_)
作者這造型一看就是大牛，以后有機(jī)會我也要搞一個，浪。
反正功能很多啦，用法一搜一大堆。
英文：點(diǎn)這里看看官網(wǎng)教程
axios安裝
$ npm install axios
如果不用npm，可以通過cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios基本用法
這里筆者使用的是es6，由于標(biāo)題是要結(jié)合vue，因此將vue、axios以及vue-axios引入。
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
#通過use方法加載axios插件
Vue.use(VueAxios，axios)
看看有哪些用法：
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]])
就挑我們最熟悉的get和post來看看：
GET用法
.vue模板：
var vm = this
this.$http.get(vm.testUrl).then((response)=>{
alert(response.data.msg);
})
這里我們通過this.$http去調(diào)用axios，如果之前你的vue-resourse也是這么寫的話，那簡直可以無縫切換。當(dāng)然你你換成this.axios也是沒有問題的，但擴(kuò)展性就不好了。
testUrl：
public function test(){
return json(array('status'=>1,'msg'=>'success'));
}
現(xiàn)象：
POST用法
這個post要重點(diǎn)說下，有坑。
.vue模板：
var vm = this
this.$http.post(vm.testUrl,{"name":"痞子達(dá)"})
.then((response)=>{
alert(response.data.msg);
})
testUrl:
public function test(){
return json(array('statys'=>1,'msg'=>$_POST['name']));
}
正常應(yīng)該彈出“痞子達(dá)”，但是并沒有，還報(bào)了500錯誤。
接口提示未定義數(shù)組索引: name
抓包看了看，是以Request Payload的形式傳送了參數(shù)。
不是我們熟悉的form-data形式，看看api：
axios.post(url[, data[, config]])
第三個參數(shù)是config配置，這個配置應(yīng)該可以做點(diǎn)事兒。這個config的參數(shù)有很多，先看看（隨便瞅下就行）：
- url —— 用來向服務(wù)器發(fā)送請求的url
- method —— 請求方法，默認(rèn)是GET方法
- baseURL —— 基礎(chǔ)URL路徑，假如url不是絕對路徑，如https://some-domain.com/api/v1/login?name=jack,那么向服務(wù)器發(fā)送請求的URL將會是baseURL + url。
- transformRequest —— transformRequest方法允許在請求發(fā)送到服務(wù)器之前修改該請求，此方法只適用于PUT、POST和PATCH方法中。而且，此方法最后必須返回一個string、ArrayBuffer或者Stream。
- transformResponse —— transformResponse方法允許在數(shù)據(jù)傳遞到then/catch之前修改response數(shù)據(jù)。此方法最后也要返回?cái)?shù)據(jù)。
headers —— 發(fā)送自定義Headers頭文件，頭文件中包含了http請求的各種信息。 - params —— params是發(fā)送請求的查詢參數(shù)對象，對象中的數(shù)據(jù)會被拼接成url?param1=value1¶m2=value2。
- paramsSerializer —— params參數(shù)序列化器。
- data —— data是在發(fā)送POST、PUT或者PATCH請求的數(shù)據(jù)對象。
- timeout —— 請求超時設(shè)置，單位為毫秒
- withCredentials —— 表明是否有跨域請求需要用到證書
- adapter —— adapter允許用戶處理更易于測試的請求。返回一個Promise和一個有效的response
- auth —— auth表明提供憑證用于完成http的身份驗(yàn)證。這將會在headers中設(shè)置一個Authorization授權(quán)信息。自定義Authorization授權(quán)要設(shè)置在headers中。
- responseType —— 表示服務(wù)器將返回響應(yīng)的數(shù)據(jù)類型，有arraybuffer、blob、document、json、text、stream這6個類型，默認(rèn)是json類似數(shù)據(jù)。
- xsrfCookieName —— 用作 xsrf token 值的 cookie 名稱
- xsrfHeaderName —— 帶有 xsrf token 值 http head 名稱
- onUploadProgress —— 允許在上傳過程中的做一些操作
- onDownloadProgress —— 允許在下載過程中的做一些操作
- maxContentLength —— 定義了接收到的response響應(yīng)數(shù)據(jù)的最大長度。
- validateStatus —— validateStatus定義了根據(jù)HTTP響應(yīng)狀態(tài)碼決定是否接收或拒絕獲取到的promise。如果 validateStatus 返回 true (或設(shè)置為 null 或 undefined ),promise將被接收;否則,promise將被拒絕。
maxRedirects —— maxRedirects定義了在node.js中redirect的最大值，如果設(shè)置為0，則沒有redirect。 - httpAgent —— 定義在使用http請求時的代理
- httpsAgent —— 定義在使用https請求時的代理
- proxy —— proxy定義代理服務(wù)器的主機(jī)名和端口，auth
- cancelToken —— cancelToken定義一個 cancel token 用于取消請求
我們發(fā)現(xiàn)有一個headers參數(shù)，那么對上面的代碼修改：
var vm = this
this.$http.post(
vm.testUrl,
{"name":"痞子達(dá)"},
{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
.then((response)=>{
alert(response.data.msg);
})
加入{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
但這個時候還是沒能夠正確彈框，因?yàn)槲覀儌鬟^去的是key字符串,并且vlue是沒有值的。
后端打印出來是這樣的：
array(1) { ["{"name":"痞子達(dá)"}"]=> string(0) "" }
這必須獲取不到啊，那我們嘗試將其轉(zhuǎn)換為query參數(shù)。
引入Qs，這個庫是axios里面包含的，不需要再下載了。
import Qs from 'qs'
var vm = this
var data = Qs.stringify({"name":"痞子達(dá)"});
this.$http.post(vm.testUrl,data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((response)=>{
alert(response.data.msg);
})
再看：
控制臺看看那form-data：
這才是我們熟悉的樣子。
但是我們不能每次請求都寫一遍config，太麻煩了。
在入口文件main.js修改：
#創(chuàng)建一個axios實(shí)例
var axios_instance = axios.create({
#config里面有這個transformRquest，這個選項(xiàng)會在發(fā)送參數(shù)前進(jìn)行處理。
#這時候我們通過Qs.stringify轉(zhuǎn)換為表單查詢參數(shù)
transformRequest: [function (data) {
data = Qs.stringify(data);
return data;
}],
#設(shè)置Content-Type
headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
Vue.use(VueAxios, axios_instance)
ok，以后發(fā)起http請求，如下即可：
var vm = this
this.$http.post(vm.url,data).then((response)=>{
alert(response.data.msg);
})
其他的用法和配置大家可以深入研究。
為什么放棄vue-resource，可以看這里：
https://github.com/vuefe/vuefe.github.io/issues/186
