axios怎么封裝，才能提升效率？

大家好，我是若川。今天分享一篇axios封裝的文章。學習源碼系列、面試、年度總結、JS基礎系列。

作為前端開發者，每個項目基本都需要和后臺交互，目前比較流行的ajax庫就是axios了，當然也有同學選擇request插件，這個蘿卜白菜，各有所愛了。目前雖然axios有config、interceptor和各個請求方式，但是針對一個大型的項目，我們還是需要做二次封裝才能快速提升開發效率！

今天我們針對axios庫做二次封裝，看看是否有簡化我們的開發工作。

創建項目

??vue?create?axios-demo

創建目錄

??//?進入到項目空間中cd?axios-demo//?在src下創建api目錄

創建三個文件(index.js/interceptor.js/request.js)

/***?index.js*?api地址管理*/
export?default?{login:'/user/login',getInfo:'/user/getInfo'
}

index.js實際上和axios封裝沒有關系，因為它也屬于API這一層，所以我一起創建了，我個人習慣把項目所有url抽取到這里集中管理。

封裝interceptor

interceptor作用就是攔截，可以針對請求參數和響應結果進行攔截處理，一般在項目當中，我們主要會針對接口常規報錯、網絡報錯、系統超時、權限認證等做攔截處理。

此處我們對通過create創建實例，設置baseUrl，timeout，然后在設置request和response的攔截。

/***?生成基礎axios對象，并對請求和響應做處理*?前后端約定接口返回解構規范*?{*????code:0,*????data:"成功",*????message:""*?}*/
import?axios?from?'axios'
import?{?Message?}?from?'element-ui'//?創建一個獨立的axios實例
const?service?=?axios.create({?//?設置baseUr地址,如果通過proxy跨域可直接填寫base地址baseURL:?'/api',//?定義統一的請求頭部headers:?{post:?{"Content-Type":?"application/x-www-form-urlencoded;charset=UTF-8"}},//?配置請求超時時間timeout:?10000,?//?如果用的JSONP，可以配置此參數帶上cookie憑證，如果是代理和CORS不用設置withCredentials:?true
});
//?請求攔截
service.interceptors.request.use(config?=>?{//?自定義header，可添加項目tokenconfig.headers.token?=?'token';return?config;
});
//?返回攔截
service.interceptors.response.use((response)=>{//?獲取接口返回結果const?res?=?response.data;//?code為0，直接把結果返回回去，這樣前端代碼就不用在獲取一次data.if(res.code?===?0){return?res;}else?if(res.code?===?10000){//?10000假設是未登錄狀態碼Message.warning(res.message);//?也可使用router進行跳轉window.location.href?=?'/#/login';return?res;}else{//?錯誤顯示可在service中控制，因為某些場景我們不想要展示錯誤//?Message.error(res.message);return?res;}
},()=>{Message.error('網絡請求異常，請稍后重試!');
});
export?default?service;

如果是CORS/JSONP需要區分環境，可通過process.env.NODE_ENV來選擇使用哪個地址。如果使用的是代理，則Vue項目需要在vue.config.js中的proxy里面增加環境判斷。

process.env.NODE_ENV===?"production"???"http://www.prod.com/api"?:?"http://localhost/:3000/api"

以上是針對interceptor做的二次封裝，上面我們沒有把常規錯誤放進去，是因為我們想要在后期控制錯誤是否顯示，所以我們會在request中處理。

封裝axios

創建request文件，針對axios做適合業務發展的封裝，很多時候架構師做公共機制都是為了迎合自身項目需要，而并非一味求大做全，所以這個大家要適當調整，比如我們只用get/post請求。

/***?request.js*?通過promise對axios做二次封裝，針對用戶端參數，做靈活配置*/
import?{?Message,Loading?}?from?'element-ui';
import?instance?from?'./interceptor'/***?核心函數，可通過它處理一切請求數據，并做橫向擴展*?@param?{url}?請求地址*?@param?{params}?請求參數*?@param {options}?請求配置，針對當前本次請求；*?@param?loading?是否顯示loading*?@param?mock?本次是否請求mock而非線上*?@param?error?本次是否顯示錯誤*/
function?request(url,params,options={loading:true,mock:false,error:true},method){let?loadingInstance;//?請求前loadingif(options.loading)loadingInstance=Loading.service();return?new?Promise((resolve,reject)=>{let?data?=?{}//?get請求使用params字段if(method?=='get')data?=?{params}//?post請求使用data字段if(method?=='post')data?=?{data:params}//?通過mock平臺可對局部接口進行mock設置if(options.mock)url='http://www.mock.com/mock/xxxx/api';instance({url,method,...data}).then((res)=>{//?此處作用很大，可以擴展很多功能。//?比如對接多個后臺，數據結構不一致，可做接口適配器//?也可對返回日期/金額/數字等統一做集中處理if(res.status?===?0){resolve(res.data);}else{//?通過配置可關閉錯誤提示if(options.error)Message.error(res.message);reject(res);}}).catch((error)=>{Message.error(error.message)}).finally(()=>{loadingInstance.close();})})
}
//?封裝GET請求
function?get(url,params,options){return?request(url,params,options,'get')
}
//?封裝POST請求
function?post(url,params,options){return?request(url,params,options,'post')
}
export?default?{get,post
}

request.js主要針對axios做二次封裝，目的同樣是為了攔截所有前端請求，這樣可以做前端loading效果、mock、錯誤攔截、錯誤彈框顯示、數據適配、參數適配、環境適配等工作。

?
接下來，我們看下如何使用
”

打開main.js

//?導入插件
import?request?from?'./api/request'
//?在原型上擴展,這樣不用在每個頁面都導入request
Vue.prototype.request?=?request;

請求調用

??this.request.get('/login',{userName:'admin',userPwd:'admin'}).then((res={})=>{//?此處只接收成功數據，失敗數據不返回}).catch(()=>{//?catch?可以不要，如果想要捕獲異常，就加上去})

如果不做二次封裝，我們很難實現以上功能點，這是在公司做了很多個中型后臺系統后，總結出來的一些個人經驗，我相信您看了之后，會有一些啟發和幫助，如果有疑問或者不夠完善可以留言或聯系我，我進行修訂。

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信江西?拉你進群。