背景：
??axios不進(jìn)行封裝也可以使用，但對(duì)于接口返回的狀態(tài)要在每個(gè)請(qǐng)求里寫一遍，代碼重復(fù)量大，不利于維護(hù)。
開(kāi)始：
??首先建一個(gè)request.js文件并在這個(gè)文件里引入axios和qs。
??用qs是為了將參數(shù)轉(zhuǎn)換成字符串傳給后端,因?yàn)閍xios默認(rèn)有兩種傳參形式，一種是Format-Data，另一種是Request Payload，Request Payload形式如果前后端都不做處理，則后端拿不到請(qǐng)求參數(shù)。這個(gè)問(wèn)題前端和后端都可以解決（前端詳見(jiàn)：Vue axios發(fā)post請(qǐng)求后臺(tái)接收不到參數(shù)的三種解決方案；據(jù)說(shuō)后端接收參數(shù)時(shí)加上@RequestBody就可以，后端我不太懂，不做擴(kuò)展了），只要有一方處理就好。
用之前當(dāng)然要先安裝一下：
npm install axios --save-dev
npm install qs --save-dev
安裝完成后在request.js里引用
//request.js
import axios from "axios"
import qs from "qs"
接下來(lái)就可以創(chuàng)建axios實(shí)例了：
const request = axios.create({
baseURL: 'http://xxx.com', // api的base_url
timeout: 5000 // 請(qǐng)求超時(shí)時(shí)間
});
如果是vue-cli初始項(xiàng)目的話，baseURL的值可以是process.env.BASE_URL。
請(qǐng)求攔截處理：
request .interceptors.request.use(function(config){
//在請(qǐng)求發(fā)送之前做一些事
config.header['Authorization'] = '' + token // 讓每個(gè)請(qǐng)求攜帶token-- ['X-TokenAuthorization']為自定義key 請(qǐng)根據(jù)實(shí)際情況自行修改
//也可以給發(fā)請(qǐng)求時(shí)加一個(gè)loading的動(dòng)畫(huà)
//當(dāng)寫java接口的童鞋不用@RequestBody接收參數(shù)時(shí)，傳參就要靠自己了
config.method === 'POST' || 'PUT' || 'PATCH' ? config.data = qs.stringify({...config.data}) : config.params = {...config.params};
return config;
},function(error){
//當(dāng)出現(xiàn)請(qǐng)求錯(cuò)誤是做一些事
return Promise.reject(error);
});
最后就是把封裝好的axios拋出去：
export default request
簡(jiǎn)單封裝就到這里了，更多配置參考axios文檔，下面來(lái)看下怎么用：
//api.js
import request from './request'
export const getData = data => {
return request ({
url: '/api/xxx',
method: 'post',
data
})
};
