Vue中Axios的封裝和API接口的管理

來源：愣錘?

https://juejin.im/post/684490365288107214

如圖，面對一團糟代碼的你~~~真的想說，What F~U~C~K?。?！

回歸正題，我們所要的說的axios的封裝和api接口的統(tǒng)一管理，其實主要目的就是在幫助我們簡化代碼和利于后期的更新維護。

一、axios的封裝

在vue項目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性，例如攔截請求和響應(yīng)、取消請求、轉(zhuǎn)換json、客戶端防御XSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護，直接推薦我們使用axios庫。如果還對axios不了解的，可以移步axios文檔。

安裝

npm?install?axios;?//?安裝axios

引入

一般我會在項目的src目錄中，新建一個request文件夾，然后在里面新建一個http.js和一個api.js文件。http.js文件用來封裝我們的axios，api.js用來統(tǒng)一管理我們的接口。

//?在http.js中引入axios
import?axios?from?'axios';?//?引入axios
import?QS?from?'qs';?//?引入qs模塊，用來序列化post類型的數(shù)據(jù)，后面會提到
// vant的toast提示框組件，大家可根據(jù)自己的ui組件更改。
import?{?Toast?}?from?'vant';?

環(huán)境的切換

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

//?環(huán)境的切換
if?(process.env.NODE_ENV?==?'development')?{????
????axios.defaults.baseURL?=?'https://www.baidu.com';}?
else?if?(process.env.NODE_ENV?==?'debug')?{????
????axios.defaults.baseURL?=?'https://www.ceshi.com';
}?
else?if?(process.env.NODE_ENV?==?'production')?{????
????axios.defaults.baseURL?=?'https://www.production.com';
}

設(shè)置請求超時

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

axios.defaults.timeout?=?10000;

post請求頭的設(shè)置

post請求的時候，我們需要加上一個請求頭，所以可以在這里進行一個默認的設(shè)置，即設(shè)置post的請求頭為application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post['Content-Type']?=?'application/x-www-form-urlencoded;charset=UTF-8';

• 請求攔截

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

請求攔截

//?先導(dǎo)入vuex,因為我們要使用到里面的狀態(tài)對象
//?vuex的路徑根據(jù)自己的路徑去寫
import?store?from?'@/store/index';

//?請求攔截器axios.interceptors.request.use(????
????config?=>?{????????
????????//?每次發(fā)送請求之前判斷vuex中是否存在token????????
????????//?如果存在，則統(tǒng)一在http請求的header都加上token，這樣后臺根據(jù)token判斷你的登錄情況
????????//?即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對返回狀態(tài)進行判斷?
????????const?token?=?store.state.token;????????
????????token?&&?(config.headers.Authorization?=?token);????????
????????return?config;????
????},????
????error?=>?{????????
????????return?Promise.error(error);????
})

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

響應(yīng)的攔截

//?響應(yīng)攔截器
axios.interceptors.response.use(????
????response?=>?{???
????????//?如果返回的狀態(tài)碼為200，說明接口請求成功，可以正常拿到數(shù)據(jù)?????
????????//?否則的話拋出錯誤
????????if?(response.status?===?200)?{????????????
????????????return?Promise.resolve(response);????????
????????}?else?{????????????
????????????return?Promise.reject(response);????????
????????}????
????},????
????//?服務(wù)器狀態(tài)碼不是2開頭的的情況
????//?這里可以跟你們的后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼????
????//?然后根據(jù)返回的狀態(tài)碼進行一些操作，例如登錄過期提示，錯誤提示等等
????//?下面列舉幾個常見的操作，其他需求可自行擴展
????error?=>?{????????????
????????if?(error.response.status)?{????????????
????????????switch?(error.response.status)?{????????????????
????????????????//?401:?未登錄
????????????????//?未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當前頁面的路徑
????????????????//?在登錄成功后返回當前頁面，這一步需要在登錄頁操作。????????????????
????????????????case?401:????????????????????
????????????????????router.replace({????????????????????????
????????????????????????path:?'/login',????????????????????????
????????????????????????query:?{?
????????????????????????????redirect:?router.currentRoute.fullPath?
????????????????????????}
????????????????????});
????????????????????break;

????????????????//?403?token過期
????????????????//?登錄過期對用戶進行提示
????????????????//?清除本地token和清空vuex中token對象
????????????????//?跳轉(zhuǎn)登錄頁面????????????????
????????????????case?403:
?????????????????????Toast({
????????????????????????message:?'登錄過期，請重新登錄',
????????????????????????duration:?1000,
????????????????????????forbidClick:?true
????????????????????});
????????????????????//?清除token
????????????????????localStorage.removeItem('token');
????????????????????store.commit('loginSuccess',?null);
????????????????????//?跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁面?
????????????????????setTimeout(()?=>?{????????????????????????
????????????????????????router.replace({????????????????????????????
????????????????????????????path:?'/login',????????????????????????????
????????????????????????????query:?{?
????????????????????????????????redirect:?router.currentRoute.fullPath?
????????????????????????????}????????????????????????
????????????????????????});????????????????????
????????????????????},?1000);????????????????????
????????????????????break;?

????????????????//?404請求不存在
????????????????case?404:
????????????????????Toast({
????????????????????????message:?'網(wǎng)絡(luò)請求不存在',
????????????????????????duration:?1500,
????????????????????????forbidClick:?true
????????????????????});
????????????????????break;
????????????????//?其他錯誤，直接拋出錯誤提示
????????????????default:
????????????????????Toast({
????????????????????????message:?error.response.data.message,
????????????????????????duration:?1500,
????????????????????????forbidClick:?true
????????????????????});
????????????}
????????????return?Promise.reject(error.response);
????????}
????}????
});

響應(yīng)攔截器很好理解，就是服務(wù)器返回給我們的數(shù)據(jù)，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果后臺返回的狀態(tài)碼是200，則正常返回數(shù)據(jù)，否則的根據(jù)錯誤的狀態(tài)碼類型進行一些我們需要的錯誤，其實這里主要就是進行了錯誤的統(tǒng)一處理和沒登錄或登錄過期后調(diào)整登錄頁的一個操作。

要注意的是，上面的Toast()方法，是我引入的vant庫中的toast輕提示組件，你根據(jù)你的ui庫，對應(yīng)使用你的一個提示組件。

封裝get方法和post方法

我們常用的ajax請求方法有g(shù)et、post、put等方法，相信小伙伴都不會陌生。axios對應(yīng)的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法：get和post。

get方法：我們通過定義一個get函數(shù)，get函數(shù)有兩個參數(shù)，第一個參數(shù)表示我們要請求的url地址，第二個參數(shù)是我們要攜帶的請求參數(shù)。get函數(shù)返回一個promise對象，當axios其請求成功時resolve服務(wù)器返回 值，請求失敗時reject錯誤值。最后通過export拋出get函數(shù)。

/**
?*?get方法，對應(yīng)get請求
?*?@param?{String}?url?[請求的url地址]
?*?@param?{Object}?params?[請求時攜帶的參數(shù)]
?*/
export?function?get(url,?params){????
????return?new?Promise((resolve,?reject)?=>{????????
????????axios.get(url,?{????????????
????????????params:?params????????
????????}).then(res?=>?{
????????????resolve(res.data);
????????}).catch(err?=>{
????????????reject(err.data)????????
????})????
});}

**post方法：**原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從參數(shù)對象進行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數(shù)。這個很重要，如果沒有序列化操作，后臺是拿不到你提交的數(shù)據(jù)的。這就是文章開頭我們import QS from 'qs';的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆。

/**?
?*?post方法，對應(yīng)post請求?
?*?@param?{String}?url?[請求的url地址]?
?*?@param?{Object}?params?[請求時攜帶的參數(shù)]?
?*/
export?function?post(url,?params)?{
????return?new?Promise((resolve,?reject)?=>?{
?????????axios.post(url,?QS.stringify(params))
????????.then(res?=>?{
????????????resolve(res.data);
????????})
????????.catch(err?=>{
????????????reject(err.data)
????????})
????});
}

這里有個小細節(jié)說下，axios.get()方法和axios.post()在提交數(shù)據(jù)時參數(shù)的書寫方式還是有區(qū)別的。區(qū)別就是，get的第二個參數(shù)是一個{}，然后這個對象的params屬性值是一個參數(shù)對象的。而post的第二個參數(shù)就是一個參數(shù)對象。兩者略微的區(qū)別要留意哦！

axios的封裝基本就完成了，下面再簡單說下api的統(tǒng)一管理。

整齊的api就像電路板一樣，即使再復(fù)雜也能很清晰整個線路。上面說了，我們會新建一個api.js,然后在這個文件中存放我們所有的api接口。

• 首先我們在api.js中引入我們封裝的get和post方法

/**???
?*?api接口統(tǒng)一管理
?*/
import?{?get,?post?}?from?'./http'

現(xiàn)在，例如我們有這樣一個接口，是一個post請求：

http://www.baiodu.com/api/v1/users/my_address/address_edit_before

我們可以在api.js中這樣封裝：

export?const?apiAddress?=?p?=>?post('api/v1/users/my_address/address_edit_before',?p);

我們定義了一個apiAddress方法，這個方法有一個參數(shù)p，p是我們請求接口時攜帶的參數(shù)對象。而后調(diào)用了我們封裝的post方法，post方法的第一個參數(shù)是我們的接口地址，第二個參數(shù)是apiAddress的p參數(shù)，即請求接口時攜帶的參數(shù)對象。最后通過export導(dǎo)出apiAddress。

然后在我們的頁面中可以這樣調(diào)用我們的api接口：

import?{?apiAddress?}?from?'@/request/api';//?導(dǎo)入我們的api接口
export?default?{????????
????name:?'Address',????
????created?()?{
????????this.onLoad();
????},
????methods:?{????????????
????????//?獲取數(shù)據(jù)????????????
????????onLoad()?{
????????????//?調(diào)用api接口，并且提供了兩個參數(shù)????????????????
????????????apiAddress({????????????????????
????????????????type:?0,????????????????????
????????????????sort:?1????????????????
????????????}).then(res?=>?{
????????????????//?獲取數(shù)據(jù)成功后的其他操作
????????????????………………????????????????
????????????})????????????
????????}????????
????}
}

其他的api接口，就在pai.js中繼續(xù)往下面擴展就可以了。友情提示，為每個接口寫好注釋哦?。?！

api接口管理的一個好處就是，我們把api統(tǒng)一集中起來，如果后期需要修改接口，我們就直接在api.js中找到對應(yīng)的修改就好了，而不用去每一個頁面查找我們的接口然后再修改會很麻煩。關(guān)鍵是，萬一修改的量比較大，就規(guī)格gg了。還有就是如果直接在我們的業(yè)務(wù)代碼修改接口，一不小心還容易動到我們的業(yè)務(wù)代碼造成不必要的麻煩。

好了，最后把完成的axios封裝代碼奉上。

/**axios封裝
?*?請求攔截、相應(yīng)攔截、錯誤統(tǒng)一處理
?*/
import?axios?from?'axios';import?QS?from?'qs';
import?{?Toast?}?from?'vant';
import?store?from?'../store/index'

//?環(huán)境的切換
if?(process.env.NODE_ENV?==?'development')?{????
????axios.defaults.baseURL?=?'/api';
}?else?if?(process.env.NODE_ENV?==?'debug')?{????
????axios.defaults.baseURL?=?'';
}?else?if?(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?=>?{
????????//?每次發(fā)送請求之前判斷是否存在token，如果存在，則統(tǒng)一在http請求的header都加上token，不用每次請求都手動添加了
????????//?即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對返回狀態(tài)進行判斷
????????const?token?=?store.state.token;????????
????????token?&&?(config.headers.Authorization?=?token);????????
????????return?config;????
????},????
????error?=>?{????????
????????return?Promise.error(error);????
????})

//?響應(yīng)攔截器
axios.interceptors.response.use(????
????response?=>?{????????
????????if?(response.status?===?200)?{????????????
????????????return?Promise.resolve(response);????????
????????}?else?{????????????
????????????return?Promise.reject(response);????????
????????}????
????},
????//?服務(wù)器狀態(tài)碼不是200的情況????
????error?=>?{????????
????????if?(error.response.status)?{????????????
????????????switch?(error.response.status)?{????????????????
????????????????//?401:?未登錄????????????????
????????????????//?未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當前頁面的路徑????????????????
????????????????//?在登錄成功后返回當前頁面，這一步需要在登錄頁操作。????????????????
????????????????case?401:????????????????????
????????????????????router.replace({????????????????????????
????????????????????????path:?'/login',????????????????????????
????????????????????????query:?{?redirect:?router.currentRoute.fullPath?}?
????????????????????});
????????????????????break;
????????????????//?403?token過期????????????????
????????????????//?登錄過期對用戶進行提示????????????????
????????????????//?清除本地token和清空vuex中token對象????????????????
????????????????//?跳轉(zhuǎn)登錄頁面????????????????
????????????????case?403:?????????????????????
????????????????????Toast({????????????????????????
????????????????????????message:?'登錄過期，請重新登錄',????????????????????????
????????????????????????duration:?1000,????????????????????????
????????????????????????forbidClick:?true????????????????????
????????????????????});????????????????????
????????????????????//?清除token????????????????????
????????????????????localStorage.removeItem('token');????????????????????
????????????????????store.commit('loginSuccess',?null);????????????????????
????????????????????//?跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁面
????????????????????setTimeout(()?=>?{????????????????????????
????????????????????????router.replace({????????????????????????????
????????????????????????????path:?'/login',????????????????????????????
????????????????????????????query:?{?
????????????????????????????????redirect:?router.currentRoute.fullPath?
????????????????????????????}????????????????????????
????????????????????????});????????????????????
????????????????????},?1000);????????????????????
????????????????????break;?
????????????????//?404請求不存在????????????????
????????????????case?404:????????????????????
????????????????????Toast({????????????????????????
????????????????????????message:?'網(wǎng)絡(luò)請求不存在',????????????????????????
????????????????????????duration:?1500,????????????????????????
????????????????????????forbidClick:?true????????????????????
????????????????????});????????????????????
????????????????break;????????????????
????????????????//?其他錯誤，直接拋出錯誤提示????????????????
????????????????default:????????????????????
????????????????????Toast({????????????????????????
????????????????????????message:?error.response.data.message,????????????????????????
????????????????????????duration:?1500,????????????????????????
????????????????????????forbidClick:?true????????????????????
????????????????????});????????????
????????????}????????????
????????????return?Promise.reject(error.response);????????
????????}???????
????}
);
/**?
?*?get方法，對應(yīng)get請求?
?*?@param?{String}?url?[請求的url地址]?
?*?@param?{Object}?params?[請求時攜帶的參數(shù)]?
?*/
export?function?get(url,?params){????
????return?new?Promise((resolve,?reject)?=>{????????
????????axios.get(url,?{????????????
????????????params:?params????????
????????})????????
????????.then(res?=>?{????????????
????????????resolve(res.data);????????
????????})????????
????????.catch(err?=>?{????????????
????????????reject(err.data)????????
????????})????
????});
}
/**?
?*?post方法，對應(yīng)post請求?
?*?@param?{String}?url?[請求的url地址]?
?*?@param?{Object}?params?[請求時攜帶的參數(shù)]?
?*/
export?function?post(url,?params)?{????
????return?new?Promise((resolve,?reject)?=>?{?????????
????????axios.post(url,?QS.stringify(params))????????
????????.then(res?=>?{????????????
????????????resolve(res.data);????????
????????})????????
????????.catch(err?=>?{????????????
????????????reject(err.data)????????
????????})????
????});
}

如果喜歡，就給個??吧(*^▽^*)

*********華麗麗的分割線******************華麗麗的分割線******************華麗麗的分割線******************華麗麗的分割線******************華麗麗的分割線*********

2018.8.14更新

axios的封裝根據(jù)需求的不同而不同。這里非常感謝評論里一些很中肯的建議，我也對此進行了思考和針對不同需求的改善。主要有以下改變：

1.優(yōu)化axios封裝，去掉之前的get和post

2.斷網(wǎng)情況處理

3.更加模塊化的api管理

4.接口域名有多個的情況

5.api掛載到vue.prototype上省去引入的步驟

http.js中axios封裝的優(yōu)化，先直接貼代碼：

/**
?*?axios封裝
?*?請求攔截、響應(yīng)攔截、錯誤統(tǒng)一處理
?*/
import?axios?from?'axios';
import?router?from?'../router';
import?store?from?'../store/index';
import?{?Toast?}?from?'vant';

/**?
?*?提示函數(shù)?
?*?禁止點擊蒙層、顯示一秒后關(guān)閉
?*/
const?tip?=?msg?=>?{????
????Toast({????????
????????message:?msg,????????
????????duration:?1000,????????
????????forbidClick:?true????
????});
}

/**?
?*?跳轉(zhuǎn)登錄頁
?*?攜帶當前頁面路由，以期在登錄頁面完成登錄后返回當前頁面
?*/
const?toLogin?=?()?=>?{
????router.replace({
????????path:?'/login',????????
????????query:?{
????????????redirect:?router.currentRoute.fullPath
????????}
????});
}

/**?
?*?請求失敗后的錯誤統(tǒng)一處理?
?*?@param?{Number}?status?請求失敗的狀態(tài)碼
?*/
const?errorHandle?=?(status,?other)?=>?{
????//?狀態(tài)碼判斷
????switch?(status)?{
????????//?401:?未登錄狀態(tài)，跳轉(zhuǎn)登錄頁
????????case?401:
????????????toLogin();
????????????break;
????????//?403?token過期
????????//?清除token并跳轉(zhuǎn)登錄頁
????????case?403:
????????????tip('登錄過期，請重新登錄');
????????????localStorage.removeItem('token');
????????????store.commit('loginSuccess',?null);
????????????setTimeout(()?=>?{
????????????????toLogin();
????????????},?1000);
????????????break;
????????//?404請求不存在
????????case?404:
????????????tip('請求的資源不存在');?
????????????break;
????????default:
????????????console.log(other);???
????????}}

//?創(chuàng)建axios實例
var?instance?=?axios.create({????timeout:?1000?*?12});
//?設(shè)置post請求頭
instance.defaults.headers.post['Content-Type']?=?'application/x-www-form-urlencoded';
/**?
?*?請求攔截器?
?*?每次請求前，如果存在token則在請求頭中攜帶token?
?*/?
instance.interceptors.request.use(????
????config?=>?{????????
????????//?登錄流程控制中，根據(jù)本地是否存在token判斷用戶的登錄情況????????
????????//?但是即使token存在，也有可能token是過期的，所以在每次的請求頭中攜帶token????????
????????//?后臺根據(jù)攜帶的token判斷用戶的登錄情況，并返回給我們對應(yīng)的狀態(tài)碼????????
????????//?而后我們可以在響應(yīng)攔截器中，根據(jù)狀態(tài)碼進行一些統(tǒng)一的操作。????????
????????const?token?=?store.state.token;????????
????????token?&&?(config.headers.Authorization?=?token);????????
????????return?config;????
????},????
????error?=>?Promise.error(error))

//?響應(yīng)攔截器
instance.interceptors.response.use(????
????//?請求成功
????res?=>?res.status?===?200???Promise.resolve(res)?:?Promise.reject(res),????
????//?請求失敗
????error?=>?{
????????const?{?response?}?=?error;
????????if?(response)?{
????????????//?請求已發(fā)出，但是不在2xx的范圍?
????????????errorHandle(response.status,?response.data.message);
????????????return?Promise.reject(response);
????????}?else?{
????????????//?處理斷網(wǎng)的情況
????????????//?eg:請求超時或斷網(wǎng)時，更新state的network狀態(tài)
????????????//?network狀態(tài)在app.vue中控制著一個全局的斷網(wǎng)提示組件的顯示隱藏
????????????//?關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)，會在斷網(wǎng)組件中說明
????????????if?(!window.navigator.onLine)?{
???????????????store.commit('changeNetwork',?false);
????????????}?else?{
????????????????return?Promise.reject(error);
????????????}
????????}
????});

export?default?instance;

這個axios和之前的大同小異，做了如下幾點改變：

1.去掉了之前get和post方法的封裝，通過創(chuàng)建一個axios實例然后export default方法導(dǎo)出，這樣使用起來更靈活一些。

2.去掉了通過環(huán)境變量控制baseUrl的值?？紤]到接口會有多個不同域名的情況，所以準備通過js變量來控制接口域名。這點具體在api里會介紹。

3.增加了請求超時，即斷網(wǎng)狀態(tài)的處理。說下思路，當斷網(wǎng)時，通過更新vuex中network的狀態(tài)來控制斷網(wǎng)提示組件的顯示隱藏。斷網(wǎng)提示一般會有重新加載數(shù)據(jù)的操作，這步會在后面對應(yīng)的地方介紹。

4.公用函數(shù)進行抽出，簡化代碼，盡量保證單一職責原則。

下面說下api這塊，考慮到一下需求：

1.更加模塊化

2.更方便多人開發(fā)，有效減少解決命名沖突

3.處理接口域名有多個情況

這里這里呢新建了一個api文件夾，里面有一個index.js和一個base.js，以及多個根據(jù)模塊劃分的接口js文件。index.js是一個api的出口，base.js管理接口域名，其他js則用來管理各個模塊的接口。

先放index.js代碼：

/**?
?*?api接口的統(tǒng)一出口
?*/
//?文章模塊接口
import?article?from?'@/api/article';
//?其他模塊的接口……

//?導(dǎo)出接口
export?default?{????
????article,
????//?……
}

index.js是一個api接口的出口，這樣就可以把api接口根據(jù)功能劃分為多個模塊，利于多人協(xié)作開發(fā)，比如一個人只負責一個模塊的開發(fā)等，還能方便每個模塊中接口的命名哦。

base.js:

/**
?*?接口域名的管理
?*/
const?base?=?{????
????sq:?'https://xxxx111111.com/api/v1',????
????bd:?'http://xxxxx22222.com/api'
}

export?default?base;

通過base.js來管理我們的接口域名，不管有多少個都可以通過這里進行接口的定義。即使修改起來，也是很方便的。

最后就是接口模塊的說明，例如上面的article.js:

/**
?*?article模塊接口列表
?*/

import?base?from?'./base';?//?導(dǎo)入接口域名列表
import?axios?from?'@/utils/http';?//?導(dǎo)入http中創(chuàng)建的axios實例
import?qs?from?'qs';?//?根據(jù)需求是否導(dǎo)入qs模塊

const?article?=?{????
????//?新聞列表????
????articleList?()?{????????
????????return?axios.get(`${base.sq}/topics`);????
????},????
????//?新聞詳情,演示????
????articleDetail?(id,?params)?{????????
????????return?axios.get(`${base.sq}/topic/${id}`,?{????????????
????????????params:?params????????
????????});????
????},
????//?post提交????
????login?(params)?{????????
????????return?axios.post(`${base.sq}/accesstoken`,?qs.stringify(params));????
????}
????//?其他接口…………
}

export?default?article;

1.通過直接引入我們封裝好的axios實例，然后定義接口、調(diào)用axios實例并返回，可以更靈活的使用axios，比如你可以對post請求時提交的數(shù)據(jù)進行一個qs序列化的處理等。

2.請求的配置更靈活，你可以針對某個需求進行一個不同的配置。關(guān)于配置的優(yōu)先級，axios文檔說的很清楚，這個順序是：在 lib/defaults.js 找到的庫的默認值，然后是實例的 defaults 屬性，最后是請求的 config 參數(shù)。后者將優(yōu)先于前者。

3.restful風格的接口，也可以通過這種方式靈活的設(shè)置api接口地址。

最后，為了方便api的調(diào)用，我們需要將其掛載到vue的原型上。在main.js中：

import?Vue?from?'vue'
import?App?from?'./App'
import?router?from?'./router'?//?導(dǎo)入路由文件
import?store?from?'./store'?//?導(dǎo)入vuex文件
import?api?from?'./api'?//?導(dǎo)入api接口

Vue.prototype.$api?=?api;?//?將api掛載到vue的原型上

然后我們可以在頁面中這樣調(diào)用接口，eg：

methods:?{????
????onLoad(id)?{??????
????????this.$api.article.articleDetail(id,?{????????
????????????api:?123??????
????????}).then(res=>?{
????????????//?執(zhí)行某些操作??????
????????})????
????}??
}

再提一下斷網(wǎng)的處理，這里只做一個簡單的示例：

<template>??
????<div?id="app">????
????????<div?v-if="!network">??????
????????????<h3>我沒網(wǎng)了h3>??????
????????????<div?@click="onRefresh">刷新div>??????
????????div>????
????????<router-view/>??????
????div>
template>

<script>
????import?{?mapState?}?from?'vuex';
????export?default?{??
????????name:?'App',??
????????computed:?{????
????????????...mapState(['network'])??
????????},??
????????methods:?{????
????????????//?通過跳轉(zhuǎn)一個空頁面再返回的方式來實現(xiàn)刷新當前頁面數(shù)據(jù)的目的
????????????onRefresh?()?{??????
????????????????this.$router.replace('/refresh')????
????????????}??
????????}
????}
script>

這是app.vue，這里簡單演示一下斷網(wǎng)。在http.js中介紹了，我們會在斷網(wǎng)的時候，來更新vue中network的狀態(tài)，那么這里我們根據(jù)network的狀態(tài)來判斷是否需要加載這個斷網(wǎng)組件。斷網(wǎng)情況下，加載斷網(wǎng)組件，不加載對應(yīng)頁面的組件。當點擊刷新的時候，我們通過跳轉(zhuǎn)refesh頁面然后立即返回的方式來實現(xiàn)重新獲取數(shù)據(jù)的操作。因此我們需要新建一個refresh.vue頁面，并在其beforeRouteEnter鉤子中再返回當前頁面。

//?refresh.vue
beforeRouteEnter?(to,?from,?next)?{
????next(vm?=>?{????????????
????????vm.$router.replace(from.fullPath)????????
????})????
}

這是一種全局通用的斷網(wǎng)提示，當然了，也可以根據(jù)自己的項目需求操作。具體操作就仁者見仁智者見智了。

如果更多的需求，或者說是不一樣的需求，可以根據(jù)自己的需求進行一個改進。

如果感覺對你有幫助，那就收藏??吧！

??愛心三連擊
1.看到這里了就點個在看支持下吧，你的「點贊，在看」是我創(chuàng)作的動力。
2.關(guān)注公眾號程序員成長指北，回復(fù)「1」加入Node進階交流群！「在這里有好多 Node 開發(fā)者，會討論 Node 知識，互相學(xué)習」！
3.也可添加微信【ikoala520】，一起成長。

“在看轉(zhuǎn)發(fā)”是最大的支持