最近在寫Vue的時候朽们，小小的嘗試了一下Axios留拾，總結(jié)一下自己的使用吧涕侈。
背景
Axios是一個基于Promise的 HTTP庫羹奉，可以用在瀏覽器和node.js 中秒旋，因為尤大大的推薦，Axios也變得越來越流行尘奏。
可能很多人不太清除Promise是什么滩褥？舉個例子，像我們之前寫前端的時候想要和后端進行交互炫加，無非就是xhr或是ajax瑰煎，現(xiàn)在Promise和Fetch橫空出世铺然，也慢慢的占據(jù)了交互領域的市場。
從Ajax酒甸、Fetch到Axios
- jquery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function() {},
error: function() {}
})
它是對原生XHR的封裝魄健，還支持JSONP，非常方便插勤；真的是用過的都說好沽瘦。但是隨著react，vue等前端框架的興起农尖，jquery早已不復當年之勇析恋。很多情況下我們只需要使用ajax，但是卻需要引入整個jquery盛卡，這非常的不合理助隧，于是便有了fetch的解決方案。
- fetch
fetch號稱是ajax的替代品滑沧，它的API是基于Promise設計的并村，舊版本的瀏覽器不支持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) // 從服務器獲取數(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進行轉(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('&')
})
- 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方法應該是基于Promise.all()的
axios體積比較小，也沒有上面fetch的各種問題患膛，我認為是當前最好的請求方式 摊阀。
具體使用
- GET
axios.get('/user?ID=123')
.then( res => {
// 請求數(shù)據(jù)成功并返回數(shù)據(jù)。
console.info(res)
}).catch( e => {
if(e.response){
//請求已發(fā)出，服務器返回狀態(tài)碼不是2xx胞此。
console.info(e.response.data)
console.info(e.response.status)
console.info(e.response.headers)
}else if(e.request){
// 請求已發(fā)出臣咖，但沒有收到響應
// 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)
})
- 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)
})
- 注意事項
在使用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時對應的傳參使用的是data儒溉，data是作為請求體發(fā)送的宦焦，同樣使用這種形式的還有PUT,PATCH等請求方式。有一點需要注意的是顿涣，axios中POST的默認請求體類型為Content-Type:application/json（JSON規(guī)范流行），這也是最常見的請求體類型酝豪，也就是說使用的是序列化后的json格式字符串來傳遞參數(shù)涛碑，如：{ "name" : "mike", "sex" : "male" }；同時孵淘，后臺必須要以支持@RequestBody的形式接收參數(shù)蒲障，否則會出現(xiàn)前臺傳參正確，后臺接收不到的情況瘫证。
如果想要設置類型為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ù)毅否。默認情況下在安裝完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'}));
