在半年前尤大就不推薦使用vue-resource了，好像我這麼沒安全感的人，沒人維護的東西不敢碰。

那麼axios這個是什麼呢？是一個國外友人開發的基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端。它有什麼用法呢：

• 從瀏覽器中建立 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支援 Promise API
• 攔截請求和響應
• 轉換請求和響應資料
• 取消請求
• 自動轉換JSON資料
• 客戶端支援防止 [CSRF/XSRF](http://baike.baidu.com/link?*url=iUceAfgyfJOacUtjPgT4ifaSOxDULAc_MzcLEOTySflAn5iLlHfMGsZMtthBm5sK4y6skrSvJ1HOO2qKtV1ej_)

作者這造型一看就是大牛，以後有機會我也要搞一個，浪。

反正功能很多啦，用法一搜一大堆。
英文：點這裡看看官網教程

axios安裝

$ npm install axios

如果不用npm，可以通過cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios基本用法

這裡筆者使用的是es6，由於標題是要結合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去呼叫axios，如果之前你的vue-resourse也是這麼寫的話，那簡直可以無縫切換。當然你你換成this.axios也是沒有問題的，但擴充套件性就不好了。

testUrl：

    public function test(){
        return json(array('status'=>1,'msg'=>'success'));
    }

現象：

POST用法

這個post要重點說下，有坑。
.vue模板：

  var vm = this
  this.$http.post(vm.testUrl,{"name":"痞子達"})
  .then((response)=>{
          alert(response.data.msg);
  })

testUrl:

   public function test(){
        return json(array('statys'=>1,'msg'=>$_POST['name']));
    }

正常應該彈出“痞子達”，但是並沒有，還報了500錯誤。
介面提示未定義陣列索引: name

抓包看了看，是以Request Payload的形式傳送了引數。
不是我們熟悉的form-data形式，看看api：

axios.post(url[, data[, config]])

第三個引數是config配置，這個配置應該可以做點事兒。這個config的引數有很多，先看看（隨便瞅下就行）：

• url —— 用來向伺服器傳送請求的url
• method —— 請求方法，預設是GET方法
• transformRequest —— transformRequest方法允許在請求傳送到伺服器之前修改該請求，此方法只適用於PUT、POST和PATCH方法中。而且，此方法最後必須返回一個string、ArrayBuffer或者Stream。
• transformResponse —— transformResponse方法允許在資料傳遞到then/catch之前修改response資料。此方法最後也要返回資料。
  headers —— 傳送自定義Headers標頭檔案，標頭檔案中包含了http請求的各種資訊。
• params —— params是傳送請求的查詢引數物件，物件中的資料會被拼接成url?param1=value1&param2=value2。
• paramsSerializer —— params引數序列化器。
• data —— data是在傳送POST、PUT或者PATCH請求的資料物件。
• timeout —— 請求超時設定，單位為毫秒
• withCredentials —— 表明是否有跨域請求需要用到證書
• adapter —— adapter允許使用者處理更易於測試的請求。返回一個Promise和一個有效的response
• auth —— auth表明提供憑證用於完成http的身份驗證。這將會在headers中設定一個Authorization授權資訊。自定義Authorization授權要設定在headers中。
• responseType —— 表示伺服器將返回響應的資料型別，有arraybuffer、blob、document、json、text、stream這6個型別，預設是json類似資料。
• xsrfCookieName —— 用作 xsrf token 值的 cookie 名稱
• xsrfHeaderName —— 帶有 xsrf token 值 http head 名稱
• onUploadProgress —— 允許在上傳過程中的做一些操作
• onDownloadProgress —— 允許在下載過程中的做一些操作
• maxContentLength —— 定義了接收到的response響應資料的最大長度。
• validateStatus —— validateStatus定義了根據HTTP響應狀態碼決定是否接收或拒絕獲取到的promise。如果 validateStatus 返回 true (或設定為 null 或 undefined ),promise將被接收;否則,promise將被拒絕。
  maxRedirects —— maxRedirects定義了在node.js中redirect的最大值，如果設定為0，則沒有redirect。
• httpAgent —— 定義在使用http請求時的代理
• httpsAgent —— 定義在使用https請求時的代理
• proxy —— proxy定義代理伺服器的主機名和埠，auth
• cancelToken —— cancelToken定義一個 cancel token 用於取消請求

我們發現有一個headers引數，那麼對上面的程式碼修改：

 var vm = this
 this.$http.post(
 vm.testUrl,
 {"name":"痞子達"},
 {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
 .then((response)=>{
         alert(response.data.msg);
})

加入{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
但這個時候還是沒能夠正確彈框，因為我們傳過去的是key字串,並且vlue是沒有值的。

後端打印出來是這樣的：

array(1) { ["{"name":"痞子達"}"]=> string(0) "" }

這必須獲取不到啊，那我們嘗試將其轉換為query引數。
引入Qs，這個庫是axios裡面包含的，不需要再下載了。

import Qs from 'qs'
 var vm = this
var data = Qs.stringify({"name":"痞子達"});
 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修改：

#建立一個axios例項
var axios_instance = axios.create({
#config裡面有這個transformRquest，這個選項會在傳送引數前進行處理。
#這時候我們通過Qs.stringify轉換為表單查詢引數
    transformRequest: [function (data) {
        data = Qs.stringify(data);
        return data;
    }],
#設定Content-Type
    headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
Vue.use(VueAxios, axios_instance)

ok，以後發起http請求，如下即可：

var vm = this
this.$http.post(vm.url,data).then((response)=>{
    alert(response.data.msg);
})

其他的用法和配置大家可以深入研究。