最近在寫Vue的時候，小小的嘗試了一下Axios，總結(jié)一下自己的使用吧。

背景

Axios是一個基于Promise的 HTTP庫，可以用在瀏覽器和node.js 中，因為尤大大的推薦，Axios也變得越來越流行。
可能很多人不太清除Promise是什么？舉個例子，像我們之前寫前端的時候想要和后端進(jìn)行交互，無非就是xhr或是ajax，現(xiàn)在Promise和Fetch橫空出世，也慢慢的占據(jù)了交互領(lǐng)域的市場。

從Ajax、Fetch到Axios

1. jquery ajax

$.ajax({
    type: 'POST',
    url: url,
    data: data,
    dataType: dataType,
    success: function() {},
    error: function() {}
})

它是對原生XHR的封裝，還支持JSONP，非常方便；真的是用過的都說好。但是隨著react，vue等前端框架的興起，jquery早已不復(fù)當(dāng)年之勇。很多情況下我們只需要使用ajax，但是卻需要引入整個jquery，這非常的不合理，于是便有了fetch的解決方案。

2. fetch
   fetch號稱是ajax的替代品，它的API是基于Promise設(shè)計的，舊版本的瀏覽器不支持Promise，需要使用polyfill es6-promise

// 原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)   // 從服務(wù)器獲取數(shù)據(jù)
    }
}
xhr.send()
// fetch
fetch(url)
    .then(response => {
        if (response.ok) {
            response.json()
        }
    })
    .then(data => console.log(data))
    .catch(err => console.log(err))

看起來好像是方便點，then鏈就像之前熟悉的callback。

再搭配上async/await將會讓我們的異步代碼更加優(yōu)雅：

async function test() {
    let response = await fetch(url);
    let data = await response.json();
    console.log(data)
}

看起來是不是像同步代碼一樣？簡直完美！好吧，其實并不完美，async/await是ES7的API，目前還在試驗階段，還需要我們使用babel進(jìn)行轉(zhuǎn)譯成ES5代碼。

還要提一下的是，fetch是比較底層的API，很多情況下都需要我們再次封裝。 比如：

// jquery ajax
$.post(url, {name: 'test'})
// fetch
fetch(url, {
    method: 'POST',
    body: Object.keys({name: 'test'}).map((key) => {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&')
})

3. axios

axios是尤雨溪大神推薦使用的，它也是對原生XHR的封裝。它有以下幾大特性：

• 可以在node.js中使用
• 提供了并發(fā)請求的接口
• 支持Promise API
• 簡單使用

axios({
    method: 'GET',
    url: url,
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})

寫法有很多種，自行查看文檔

并發(fā)請求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

這是官方的并發(fā)案例，好像是挺厲害的樣子。不過感覺它的all方法應(yīng)該是基于Promise.all()的

axios體積比較小，也沒有上面fetch的各種問題，我認(rèn)為是當(dāng)前最好的請求方式 。

具體使用

1. GET

axios.get('/user?ID=123')
    .then( res => {
         // 請求數(shù)據(jù)成功并返回數(shù)據(jù)。
        console.info(res)
    }).catch( e => {
        if(e.response){
        //請求已發(fā)出，服務(wù)器返回狀態(tài)碼不是2xx。
            console.info(e.response.data)
            console.info(e.response.status)
            console.info(e.response.headers)
        }else if(e.request){
            // 請求已發(fā)出，但沒有收到響應(yīng)
            // e.request 在瀏覽器里是一個XMLHttpRequest實例，
            // 在node中是一個http.ClientRequest實例
            console.info(e.request)
        }else{
            //發(fā)送請求時異常，捕捉到錯誤
            console.info('error',e.message)
        }
        console.info(e.config)
    })
// 等同以下寫法
axios({
    url: '/user',
    method: 'GET',
    params: {
        ID: 123
    }
}).then( res => {
    console.info(res)
}).catch( e => {
    console.info(e)
})

2. POST

axios.post('/user', {
    firstName: 'Mike',
    lastName: 'Allen'
}).then( res => {
    console.info(res)
}).catch( e => {
    console.info(e)
})
// 等同以下寫法
axios({
    url: '/user',
    method: 'POST',
    data: {
        firstName: 'Mike',
        lastName: 'Allen'
    }
}).then( res => {
    console.info(res)
}).catch( e => {
   console.info(e)
})

3. 注意事項

在使用GET方法傳遞參數(shù)時使用的是params，并且官方文檔中介紹為：params are the URL parameters to be sent with the request. Must be a plain object or a URLSearchParams object。譯為：params作為URL鏈接中的參數(shù)發(fā)送請求，且其必須是一個plain object或者是URLSearchParams object。plain object（純對象）是指用JSON形式定義的普通對象或者new Object()創(chuàng)建的簡單對象；而URLSearchParams object指的是一個可以由URLSearchParams接口定義的一些實用方法來處理 URL 的查詢字符串的對象，也就是說params傳參是以/user?ID=1&name=mike&sex=male形式傳遞的。

而在使用POST時對應(yīng)的傳參使用的是data，data是作為請求體發(fā)送的，同樣使用這種形式的還有PUT,PATCH等請求方式。有一點需要注意的是，axios中POST的默認(rèn)請求體類型為Content-Type:application/json（JSON規(guī)范流行），這也是最常見的請求體類型，也就是說使用的是序列化后的json格式字符串來傳遞參數(shù)，如：{ "name" : "mike", "sex" : "male" }；同時，后臺必須要以支持@RequestBody的形式接收參數(shù)，否則會出現(xiàn)前臺傳參正確，后臺接收不到的情況。
如果想要設(shè)置類型為Content-Type:application/x-www-form-urlencoded（瀏覽器原生支持），axios提供了兩種方式，如下：

瀏覽器端

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/user', params);

不過，并不是所有瀏覽器都支持URLSearchParams，兼容性查詢caniuse.com，但是這里有一個Polyfill (polyfill:用于實現(xiàn)瀏覽器并不支持的原生API的代碼，可以模糊理解為補丁，同時要確保polyfill在全局環(huán)境中)。
或者，你也可以用qs這個庫來格式化數(shù)據(jù)。默認(rèn)情況下在安裝完axios后就可以使用qs庫。

const qs = require('qs');
axios.post('/user', qs.stringify({'name':'mike'}));

node層

在node環(huán)境中可以使用querystring。同樣，也可以用qs來格式化數(shù)據(jù)。

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({'name':'mike'}));