前言：
? ??????在一開(kāi)始前后臺(tái)交互過(guò)程中旋恼，我們一般都是使用傳統(tǒng)的ajax進(jìn)行交互黄伊，傳統(tǒng)ajax 指的是XMLHttpRequest（XHR），隸屬原生js中戳护，核心使用XMLHttpRequest對(duì)象妇菱，多個(gè)請(qǐng)求之間如果有先后關(guān)系的話顶猜，就會(huì)出現(xiàn)回調(diào)地獄屿讽，往往需要封裝多層回調(diào)方法進(jìn)行數(shù)據(jù)關(guān)系邏輯處理皂冰。
? ? ? ? 隨著時(shí)間的發(fā)展鹊奖，前端流行起來(lái)了angular/vue/react 等等各種前端新的框架邏輯苛聘，使用mvc/mvvm等模式進(jìn)行編程開(kāi)發(fā)，然而這個(gè)時(shí)候我們的ajax并不能滿足前端mvvm的浪潮，個(gè)性打包也不能享用cdn的加速處理设哗，這個(gè)時(shí)候在vue2中唱捣，我們的大神尤大大提出使用axios進(jìn)行交互處理。廢話少說(shuō)网梢，這里介紹一下震缭，我對(duì)axios的封裝處理過(guò)程。
? ? ? ? 1.首先為了區(qū)分環(huán)境處理战虏，我們libs下新建 config.js 和ajax.js 兩個(gè)文件拣宰。config中處理我們基礎(chǔ)的環(huán)境配置處理。這些內(nèi)容較為簡(jiǎn)單烦感，可以根據(jù)個(gè)人需求進(jìn)行修改：
? ? ? ? ??
2.ajax中的處理：
import?configURL?from?'./config';
import?router?from?'../route/index'
const?getAjaxUrl?=(url)=>?{
??//?if?(/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i.test(url))?{
??//?????return?configURL.baseURL?+?URL
??//?}
??return?configURL.baseURL?+?url+configURL.urlParams
}
axios.defaults.baseURL?=??''
axios.defaults.timeout=10000
//?請(qǐng)求攔截
axios.interceptors.request.use(
????reqConfig?=>?{
??????//?每次發(fā)送請(qǐng)求之前判斷?localStorage?中是否存在token
??????//?如果存在巡社，則統(tǒng)一在http請(qǐng)求的header都加上token，這樣后臺(tái)根據(jù)token判斷你的登錄情況
??????//?即使本地存在token啸盏，也有可能token是過(guò)期的重贺，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷
??????//?const?token?=?localStorage.getItem('token')
??????//?const?token?=?'dbrkon78l4mja4eq2vs8hhl8staio4nj'??//?測(cè)試使用
??????//?const?token?=?''??//?測(cè)試使用??
??????//?token?&&?(reqConfig.headers['X-WX-Token']?=?token)
??????//?reqConfig.params?&&?(reqConfig.params.qrId?=?46);
??????return?reqConfig;
????},
????reqError?=>?{
??????return?Promise.reject(reqError)
????}
??)
??//?響應(yīng)攔截? ?每個(gè)公司code返回?cái)?shù)據(jù)格式請(qǐng)求都不相同，根據(jù)個(gè)人需求自行調(diào)整
??axios.interceptors.response.use(
????resData?=>?{
??????//?如果返回的狀態(tài)碼為200回懦，說(shuō)明接口請(qǐng)求成功气笙，可以正常拿到數(shù)據(jù)
??????//?否則的話拋出錯(cuò)誤
??????if?(resData.status?===?200)?{
????????const?resultNum?=??resData.data.code;
????????switch?(resultNum)?{
??????????case?0:
??????????????return?Promise.resolve(resData.data);
??????????case?500:
??????????????return?Promise.resolve(resData.data);
????????}
??????}?else?{
????????return?Promise.reject(resData.data);
??????}
????},
????resError?=>?{
??????return?Promise.reject(resError);
????}
??)
??/**
???*?GET?請(qǐng)求
???*?@param?{?String?}?url????請(qǐng)求地址
???*?@param?{?Object?}?params???參數(shù)對(duì)象
???*?@param?{?Object?}?config???配置對(duì)象
???*?@param?{?Function?}?errCallback???回調(diào)函數(shù)
???*/
??export?const?$get?=?(url?=?'',?params?=?{},?config?=?{},?errCallback?=?null)?=>?{
????//?const?_config?=?Object.assign({
????//???headers:?{
????//?????'qrCode':?sessionStorage.getItem('code')?||?''
????//???}
????//?},?config);
????//?if(sessionStorage.getItem('code')){
????//???params?=?_config.headers
????//?}
????return?axios.get(getAjaxUrl(url),?{params},?config).then(res?=>?{
??????return?res;
????}).catch(err?=>?{
??????errCallback?&&?errCallback();
??????return?err;
????})
??}
??/**
???*?POST?請(qǐng)求
???*?@param?{?String?}?url????請(qǐng)求地址
???*?@param?{?Object?}?params???參數(shù)對(duì)象
???*?@param?{?Object?}?config???配置對(duì)象
???*?@param?{?Function?}?errCallback???回調(diào)函數(shù)
???*/
??export?const?$post?=?(url?=?'',?params?=?{},?config?=?{},?errCallback?=?null)?=>?{
????const?_config?=?Object.assign({
??????headers:?{
????????'Content-Type':?'application/x-www-form-urlencoded'
??????},
????},?config);
????let?resultParams;
????if?(_config.headers['Content-Type'].toLowerCase().indexOf('json')?>?-1)?{
??????resultParams?=?params;
????}?else?{
??????resultParams?=?params;
????}
????return?axios.post(getAjaxUrl(url)+'?qrCode='+sessionStorage.getItem('code'),?resultParams,?_config).then(res?=>?{
??????console.log(res)
??????return?res;
????}).catch(err?=>?{
??????errCallback?&&?errCallback();
??????return?err;
????})
??}
之后 我們?cè)赼pi的文件中進(jìn)行調(diào)用使用
import?{?$get?,$post}?from?'@/libs/ajax.js';
例微信接口處理 get請(qǐng)求
const getWxConfig?=?(data?=?{})?=>?{
????return?$get(
??????'/apiStk/wx/weixin',
??????Object.assign({},?data)
????)
??}
const? saveStkQrDetail?=?(data?=?{})?=>?{
??return?$post(
??????'/apiStk/make/saveStkQrDetail',
??????Object.assign({},data),
??????{
??????????headers:?{
????????????'Content-Type':?'application/json'
??????????}
??????}
??)
}
??export?{
? ? getWxConfig,
??}
