簡(jiǎn)單介紹

在半年前尤大就不推薦使用vue-resource了，好像我這么沒(méi)安全感的人，沒(méi)人維護(hù)的東西不敢碰。

1987062-b3255d564903d3d7.png

那么axios這個(gè)是什么呢？是一個(gè)國(guó)外友人開(kāi)發(fā)的基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。它有什么用法呢：

• 從瀏覽器中創(chuàng)建 XMLHttpRequest
• 從 node.js 發(fā)出 http 請(qǐng)求
• 支持 Promise API
• 攔截請(qǐng)求和響應(yīng)
• 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
• 取消請(qǐng)求
• 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
• 客戶端支持防止 [CSRF/XSRF](http://baike.baidu.com/link?* url=iUceAfgyfJOacUtjPgT4ifaSOxDULAc_MzcLEOTySflAn5iLlHfMGsZMtthBm5sK4y6skrSvJ1HOO2qKtV1ej_)

作者這造型一看就是大牛，以后有機(jī)會(huì)我也要搞一個(gè)，浪。

Paste_Image.png

反正功能很多啦，用法一搜一大堆。
英文：點(diǎn)這里看看官網(wǎng)教程

axios安裝

$ npm install axios

如果不用npm，可以通過(guò)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'
#通過(guò)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來(lái)看看：

GET用法

.vue模板：

  var vm = this
  this.$http.get(vm.testUrl).then((response)=>{
                    alert(response.data.msg);
   })

這里我們通過(guò)this.$http去調(diào)用axios，如果之前你的vue-resourse也是這么寫(xiě)的話，那簡(jiǎn)直可以無(wú)縫切換。當(dāng)然你你換成this.axios也是沒(méi)有問(wèn)題的，但擴(kuò)展性就不好了。

testUrl：

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

現(xiàn)象：

Paste_Image.png

POST用法

這個(gè)post要重點(diǎn)說(shuō)下，有坑。
.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á)”，但是并沒(méi)有，還報(bào)了500錯(cuò)誤。
接口提示未定義數(shù)組索引: name

Paste_Image.png

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

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

第三個(gè)參數(shù)是config配置，這個(gè)配置應(yīng)該可以做點(diǎn)事兒。這個(gè)config的參數(shù)有很多，先看看（隨便瞅下就行）：

• url —— 用來(lái)向服務(wù)器發(fā)送請(qǐng)求的url
• method —— 請(qǐng)求方法，默認(rèn)是GET方法
• baseURL —— 基礎(chǔ)URL路徑，假如url不是絕對(duì)路徑，如https://some-domain.com/api/v1/login?name=jack,那么向服務(wù)器發(fā)送請(qǐng)求的URL將會(huì)是baseURL + url。
• transformRequest —— transformRequest方法允許在請(qǐng)求發(fā)送到服務(wù)器之前修改該請(qǐng)求，此方法只適用于PUT、POST和PATCH方法中。而且，此方法最后必須返回一個(gè)string、ArrayBuffer或者Stream。
• transformResponse —— transformResponse方法允許在數(shù)據(jù)傳遞到then/catch之前修改response數(shù)據(jù)。此方法最后也要返回?cái)?shù)據(jù)。
  headers —— 發(fā)送自定義Headers頭文件，頭文件中包含了http請(qǐng)求的各種信息。
• params —— params是發(fā)送請(qǐng)求的查詢參數(shù)對(duì)象，對(duì)象中的數(shù)據(jù)會(huì)被拼接成url?param1=value1&param2=value2。
• paramsSerializer —— params參數(shù)序列化器。
• data —— data是在發(fā)送POST、PUT或者PATCH請(qǐng)求的數(shù)據(jù)對(duì)象。
• timeout —— 請(qǐng)求超時(shí)設(shè)置，單位為毫秒
• withCredentials —— 表明是否有跨域請(qǐng)求需要用到證書(shū)
• adapter —— adapter允許用戶處理更易于測(cè)試的請(qǐng)求。返回一個(gè)Promise和一個(gè)有效的response
• auth —— auth表明提供憑證用于完成http的身份驗(yàn)證。這將會(huì)在headers中設(shè)置一個(gè)Authorization授權(quán)信息。自定義Authorization授權(quán)要設(shè)置在headers中。
• responseType —— 表示服務(wù)器將返回響應(yīng)的數(shù)據(jù)類型，有arraybuffer、blob、document、json、text、stream這6個(gè)類型，默認(rèn)是json類似數(shù)據(jù)。
• xsrfCookieName —— 用作 xsrf token 值的 cookie 名稱
• xsrfHeaderName —— 帶有 xsrf token 值 http head 名稱
• onUploadProgress —— 允許在上傳過(guò)程中的做一些操作
• onDownloadProgress —— 允許在下載過(guò)程中的做一些操作
• maxContentLength —— 定義了接收到的response響應(yīng)數(shù)據(jù)的最大長(zhǎng)度。
• validateStatus —— validateStatus定義了根據(jù)HTTP響應(yīng)狀態(tài)碼決定是否接收或拒絕獲取到的promise。如果 validateStatus 返回 true (或設(shè)置為 null 或 undefined ),promise將被接收;否則,promise將被拒絕。
  maxRedirects —— maxRedirects定義了在node.js中redirect的最大值，如果設(shè)置為0，則沒(méi)有redirect。
• httpAgent —— 定義在使用http請(qǐng)求時(shí)的代理
• httpsAgent —— 定義在使用https請(qǐng)求時(shí)的代理
• proxy —— proxy定義代理服務(wù)器的主機(jī)名和端口，auth
• cancelToken —— cancelToken定義一個(gè) cancel token 用于取消請(qǐng)求

我們發(fā)現(xiàn)有一個(gè)headers參數(shù)，那么對(duì)上面的代碼修改：

 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'}}
但這個(gè)時(shí)候還是沒(méi)能夠正確彈框，因?yàn)槲覀儌鬟^(guò)去的是key字符串,并且vlue是沒(méi)有值的。

Paste_Image.png

后端打印出來(lái)是這樣的：

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

這必須獲取不到啊，那我們嘗試將其轉(zhuǎn)換為query參數(shù)。
引入Qs，這個(gè)庫(kù)是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);
})

再看：

Paste_Image.png

控制臺(tái)看看那form-data：

Paste_Image.png

這才是我們熟悉的樣子。

但是我們不能每次請(qǐng)求都寫(xiě)一遍config，太麻煩了。
在入口文件main.js修改：

#創(chuàng)建一個(gè)axios實(shí)例
var axios_instance = axios.create({
#config里面有這個(gè)transformRquest，這個(gè)選項(xiàng)會(huì)在發(fā)送參數(shù)前進(jìn)行處理。
#這時(shí)候我們通過(guò)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請(qǐng)求，如下即可：

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