我們所要的說的axios的封裝和api介面的統一管理，其實主要目的就是在幫助我們簡化代碼和利於後期的更新維護。下面學步園小編來講解下axios怎麼封裝？封裝get方法和post方法有哪些？
axios怎麼封裝
在vue項目中，和後台交互獲取數據這塊，我們通常使用的是axios庫，它是基於promise的http庫，可運行在瀏覽器端和node.js中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防禦XSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護，直接推薦我們使用axios庫。如果還對axios不了解的，可以移步axios文檔。
安裝
npminstallaxios;//安裝axios複製代碼
引入
一般我會在項目的src目錄中，新建一個request文件夾，然後在裡面新建一個http.js和一個api.js文件。http.js文件用來封裝我們的axios，api.js用來統一管理我們的介面。
//在http.js中引入axios
importaxiosfrom'axios';//引入axios
importQSfrom'qs';//引入qs模塊，用來序列化post類型的數據，後面會提到
//vant的toast提示框組件，大家可根據自己的ui組件更改。
import{Toast}from'vant';
複製代碼
環境的切換
我們的項目環境可能有開發環境、測試環境和生產環境。我們通過node的環境變數來匹配我們的默認的介面url前綴。axios.defaults.baseURL可以設置axios的默認請求地址就不多說了。
//環境的切換
if(process.env.NODE_ENV=='development'){
axios.defaults.baseURL='https://www.baidu.com';}
elseif(process.env.NODE_ENV=='debug'){
axios.defaults.baseURL='https://www.ceshi.com';
}
elseif(process.env.NODE_ENV=='production'){
axios.defaults.baseURL='https://www.production.com';
}複製代碼
設置請求超時
通過axios.defaults.timeout設置默認的請求超時時間。例如超過了10s，就會告知用戶當前請求超時，請刷新等。
axios.defaults.timeout=10000;複製代碼
post請求頭的設置
post請求的時候，我們需要加上一個請求頭，所以可以在這裡進行一個默認的設置，即設置post的請求頭為application/x-www-form-urlencoded;charset=UTF-8
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';複製代碼
請求攔截
我們在發送請求前可以進行一個請求的攔截，為什麼要攔截呢，我們攔截請求是用來做什麼的呢？比如，有些請求是需要用戶登錄之後才能訪問的，或者post請求的時候，我們需要序列化我們提交的數據。這時候，我們可以在請求被發送之前進行一個攔截，從而進行我們想要的操作。
請求攔截
//先導入vuex,因為我們要使用到裡面的狀態對象
//vuex的路徑根據自己的路徑去寫
importstorefrom'@/store/index';
//請求攔截器axios.interceptors.request.use(
config=>{
//每次發送請求之前判斷vuex中是否存在token
//如果存在，則統一在http請求的header都加上token，這樣後台根據token判斷你的登錄情況
//即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷
consttoken=store.state.token;
token&&(config.headers.Authorization=token);
returnconfig;
},
error=>{
returnPromise.error(error);
})
複製代碼
這裡說一下token，一般是在登錄完成之後，將用戶的token通過localStorage或者cookie存在本地，然後用戶每次在進入頁面的時候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經登陸過，則更新vuex中的token狀態。然後，在每次請求介面的時候，都會在請求的header中攜帶token，後台人員就可以根據你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。這時候或許有些小夥伴會有疑問了，就是每個請求都攜帶token，那麼要是一個頁面不需要用戶登錄就可以訪問的怎麼辦呢？其實，你前端的請求可以攜帶token，但是後台可以選擇不接收啊！
響應的攔截
//響應攔截器
axios.interceptors.response.use(
response=>{
//如果返回的狀態碼為200，說明介面請求成功，可以正常拿到數據
//否則的話拋出錯誤
if(response.status===200){
returnPromise.resolve(response);
}else{
returnPromise.reject(response);
}
},
//伺服器狀態碼不是2開頭的的情況
//這裡可以跟你們的後台開發人員協商好統一的錯誤狀態碼
//然後根據返回的狀態碼進行一些操作，例如登錄過期提示，錯誤提示等等
//下面列舉幾個常見的操作，其他需求可自行擴展
error=>{
if(error.response.status){
switch(error.response.status){
//401:未登錄
//未登錄則跳轉登錄頁面，並攜帶當前頁面的路徑
//在登錄成功後返回當前頁面，這一步需要在登錄頁操作。
case401:
router.replace({
path:'/login',
query:{
redirect:router.currentRoute.fullPath
}
});
break;
//403token過期
//登錄過期對用戶進行提示
//清除本地token和清空vuex中token對象
//跳轉登錄頁面
case403:
Toast({
message:'登錄過期，請重新登錄',
duration:1000,
forbidClick:true
});
//清除token
localStorage.removeItem('token');
store.commit('loginSuccess',null);
//跳轉登錄頁面，並將要瀏覽的頁面fullPath傳過去，登錄成功後跳轉需要訪問的頁面
setTimeout(()=>{
router.replace({
path:'/login',
query:{
redirect:router.currentRoute.fullPath
}
});
},1000);
break;
//404請求不存在
case404:
Toast({
message:'網路請求不存在',
duration:1500,
forbidClick:true
});
break;
//其他錯誤，直接拋出錯誤提示
default:
Toast({
message:error.response.data.message,
duration:1500,
forbidClick:true
});
}
returnPromise.reject(error.response);
}
}
});複製代碼
響應攔截器很好理解，就是伺服器返回給我們的數據，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果後台返回的狀態碼是200，則正常返回數據，否則的根據錯誤的狀態碼類型進行一些我們需要的錯誤，其實這裡主要就是進行了錯誤的統一處理和沒登錄或登錄過期後調整登錄頁的一個操作。
要注意的是，上面的Toast()方法，是我引入的vant庫中的toast輕提示組件，你根據你的ui庫，對應使用你的一個提示組件。
封裝get方法和post方法有哪些
我們常用的ajax請求方法有get、post、put等方法，相信小夥伴都不會陌生。axios對應的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法：get和post。
get方法：我們通過定義一個get函數，get函數有兩個參數，第一個參數表示我們要請求的url地址，第二個參數是我們要攜帶的請求參數。get函數返回一個promise對象，當axios其請求成功時resolve伺服器返回值，請求失敗時reject錯誤值。最後通過export拋出get函數。
/**
*get方法，對應get請求
*@param{String}url[請求的url地址]
*@param{Object}params[請求時攜帶的參數]
*/
exportfunctionget(url,params){
returnnewPromise((resolve,reject)=>{
axios.get(url,{
params:params
}).then(res=>{
resolve(res.data);
}).catch(err=>{
reject(err.data)
})
});}複製代碼
post方法：原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從參數對象進行序列化的操作，所以這裡我們通過node的qs模塊來序列化我們的參數。這個很重要，如果沒有序列化操作，後台是拿不到你提交的數據的。這就是文章開頭我們importQSfrom『qs』;的原因。如果不明白序列化是什麼意思的，就百度一下吧，答案一大堆。
/**
*post方法，對應post請求
*@param{String}url[請求的url地址]
*@param{Object}params[請求時攜帶的參數]
*/
exportfunctionpost(url,params){
returnnewPromise((resolve,reject)=>{
axios.post(url,QS.stringify(params))
.then(res=>{
resolve(res.data);
})
.catch(err=>{
reject(err.data)
})
});
}複製代碼
這裡有個小細節說下，axios.get()方法和axios.post()在提交數據時參數的書寫方式還是有區別的。區別就是，get的第二個參數是一個{}，然後這個對象的params屬性值是一個參數對象的。而post的第二個參數就是一個參數對象。兩者略微的區別要留意哦！
axios的封裝基本就完成了，下面再簡單說下api的統一管理。
整齊的api就像電路板一樣，即使再複雜也能很清晰整個線路。上面說了，我們會新建一個api.js,然後在這個文件中存放我們所有的api介面。
首先我們在api.js中引入我們封裝的get和post方法
/**
*api介面統一管理
*/
import{get,post}from'./http'複製代碼
現在，例如我們有這樣一個介面，是一個post請求：
http://www.baiodu.com/api/v1/users/my_address/address_edit_before複製代碼
我們可以在api.js中這樣封裝：
exportconstapiAddress=p=>post('api/v1/users/my_address/address_edit_before',p);複製代碼
我們定義了一個apiAddress方法，這個方法有一個參數p，p是我們請求介面時攜帶的參數對象。而後調用了我們封裝的post方法，post方法的第一個參數是我們的介面地址，第二個參數是apiAddress的p參數，即請求介面時攜帶的參數對象。最後通過export導出apiAddress。
然後在我們的頁面中可以這樣調用我們的api介面：
import{apiAddress}from'@/request/api';//導入我們的api介面
exportdefault{
name:'Address',
created(){
this.onLoad();
},
methods:{
//獲取數據
onLoad(){
//調用api介面，並且提供了兩個參數
apiAddress({
type:0,
sort:1
}).then(res=>{
//獲取數據成功後的其他操作
………………
})
}
}
}複製代碼
其他的api介面，就在pai.js中繼續往下面擴展就可以了。友情提示，為每個介面寫好注釋哦！！！
api介面管理的一個好處就是，我們把api統一集中起來，如果後期需要修改介面，我們就直接在api.js中找到對應的修改就好了，而不用去每一個頁面查找我們的介面然後再修改會很麻煩。關鍵是，萬一修改的量比較大，就規格gg了。還有就是如果直接在我們的業務代碼修改介面，一不小心還容易動到我們的業務代碼造成不必要的麻煩。
好了，最後把完成的axios封裝代碼奉上。
/**axios封裝
*請求攔截、相應攔截、錯誤統一處理
*/
importaxiosfrom'axios';importQSfrom'qs';
import{Toast}from'vant';
importstorefrom'../store/index'
//環境的切換
if(process.env.NODE_ENV=='development'){
axios.defaults.baseURL='/api';
}elseif(process.env.NODE_ENV=='debug'){
axios.defaults.baseURL='';
}elseif(process.env.NODE_ENV=='production'){
axios.defaults.baseURL='http://api.123dailu.com/';
}
//請求超時時間
axios.defaults.timeout=10000;
//post請求頭
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';
//請求攔截器
axios.interceptors.request.use(
config=>{
//每次發送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
//即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷
consttoken=store.state.token;
token&&(config.headers.Authorization=token);
returnconfig;
},
error=>{
returnPromise.error(error);
})
//響應攔截器
axios.interceptors.response.use(
response=>{
if(response.status===200){
returnPromise.resolve(response);
}else{
returnPromise.reject(response);
}
},
//伺服器狀態碼不是200的情況
error=>{
if(error.response.status){
switch(error.response.status){
//401:未登錄
//未登錄則跳轉登錄頁面，並攜帶當前頁面的路徑
//在登錄成功後返回當前頁面，這一步需要在登錄頁操作。
case401:
router.replace({
path:'/login',
query:{redirect:router.currentRoute.fullPath}
});
break;
//403token過期
//登錄過期對用戶進行提示
//清除本地token和清空vuex中token對象
//跳轉登錄頁面
case403:
Toast({
message:'登錄過期，請重新登錄',
duration:1000,
forbidClick:true
});
//清除token
localStorage.removeItem('token');
store.commit('loginSuccess',null);
//跳轉登錄頁面，並將要瀏覽的頁面fullPath傳過去，登錄成功後跳轉需要訪問的頁面
setTimeout(()=>{
router.replace({
path:'/login',
query:{
redirect:router.currentRoute.fullPath
}
});
},1000);
break;
//404請求不存在
case404:
Toast({
message:'網路請求不存在',
duration:1500,
forbidClick:true
});
break;
//其他錯誤，直接拋出錯誤提示
default:
Toast({
message:error.response.data.message,
duration:1500,
forbidClick:true
});
}
returnPromise.reject(error.response);
}
}
);
/**
*get方法，對應get請求
*@param{String}url[請求的url地址]
*@param{Object}params[請求時攜帶的參數]
*/
exportfunctionget(url,params){
returnnewPromise((resolve,reject)=>{
axios.get(url,{
params:params
})
.then(res=>{
resolve(res.data);
})
.catch(err=>{
reject(err.data)
})
});
}
/**
*post方法，對應post請求
*@param{String}url[請求的url地址]
*@param{Object}params[請求時攜帶的參數]
*/
exportfunctionpost(url,params){
returnnewPromise((resolve,reject)=>{
axios.post(url,QS.stringify(params))
.then(res=>{
resolve(res.data);
})
.catch(err=>{
reject(err.data)
})
});
}
複製代碼
以上就是關於「axios怎麼封裝？封裝get方法和post方法有哪些」的內容，希望對大家有用。更多資訊請關注學步園。學步園，您學習IT技術的優質平台!