axios的封裝

引入

一般我會在utils文件夾下創(chuàng)建一個request.js文件，然后再創(chuàng)建一個api文件夾，request.js文件用來封裝我們的axios，api文件下我們統(tǒng)一管理接口

request.js

環(huán)境的切換

我們的項目環(huán)境可能有開發(fā)環(huán)境、測試環(huán)境和生產環(huán)境。我們通過node的環(huán)境變量來匹配我們的默認的接口url前綴。axios.defaults.baseURL可以設置axios的默認請求地址就不多說了

環(huán)境切換

設置請求超時

通過axios.defaults.timeout設置默認的請求超時時間。例如超過了10s，就會告知用戶當前請求超時，請刷新等

請求超時

post請求頭的設置

post請求的時候，我們需要加上一個請求頭，這里的請求頭我是設置的本地存儲的token值和用戶名

請求頭

請求攔截

我們在發(fā)送請求前可以進行一個請求的攔截，為什么要攔截呢？我們攔截請求是用來做什么的呢？比如，有些請求是需要用戶登錄之后才能訪問的，或者post請求的時候，我們需要序列化我們提交的數(shù)據(jù)。這時候，我們可以在請求被發(fā)送之前進行一個攔截，從而進行我們想要的操作

請求攔截

這里說一下token，一般是在登錄完成之后，將用戶的token通過localStorage或者cookie存在本地，然后用戶每次在進入頁面的時候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經登陸過，然后，在每次請求接口的時候，都會在請求的header中攜帶token，后臺人員就可以根據(jù)你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。這時候或許有些小伙伴會有疑問了，就是每個請求都攜帶token，那么要是一個頁面不需要用戶登錄就可以訪問的怎么辦呢？其實，你前端的請求可以攜帶token，但是后臺可以選擇不接收啊

響應的攔截

響應攔截

響應攔截器很好理解，就是服務器返回給我們的數(shù)據(jù)，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果后臺返回的數(shù)據(jù)里resCode不為0的話，根據(jù)錯誤返回的數(shù)據(jù)進行一些我們需要的錯誤提示和數(shù)據(jù)返回，如果等于0的話則正常返回數(shù)據(jù)

request方法

可以接收一系列的配置項

request()

這里配置了請求接口的url地址，請求方法，和傳入的參數(shù)

其他

還有一些get，post等方法，相信大家也不會陌生，axios對應的也有很多類似的方法，不清楚的可以看下文檔，這里我就不過多的介紹了