在vue項(xiàng)目中，和后臺(tái)交互獲取數(shù)據(jù)這塊咖驮，我們通常使用的是axios庫(kù)，它是基于promise的http庫(kù)训枢，可運(yùn)行在瀏覽器端和node.js中托修。他有很多優(yōu)秀的特性，例如攔截請(qǐng)求和響應(yīng)恒界、取消請(qǐng)求睦刃、轉(zhuǎn)換json、客戶(hù)端防御cSRF等十酣。所以我們的尤大大也是果斷放棄了對(duì)其官方庫(kù)vue-resource的維護(hù)涩拙，直接推薦我們使用axios庫(kù)
安裝
npm install axios; // 安裝axios復(fù)制代碼
引入
一般我會(huì)在項(xiàng)目的src目錄中际长，新建一個(gè)request文件夾，然后在里面新建一個(gè)http.js和一個(gè)api.js文件兴泥。http.js文件用來(lái)封裝我們的axios工育，api.js用來(lái)統(tǒng)一管理我們的接口。
// 在http.js中引入axiosimport axios from'axios'; // 引入axiosimport QS from'qs'; // 引入qs模塊搓彻，用來(lái)序列化post類(lèi)型的數(shù)據(jù)如绸，后面會(huì)提到// vant的toast提示框組件，大家可根據(jù)自己的ui組件更改旭贬。import { Toast } from'vant';復(fù)制代碼
環(huán)境的切換
我們的項(xiàng)目環(huán)境可能有開(kāi)發(fā)環(huán)境竭沫、測(cè)試環(huán)境和生產(chǎn)環(huán)境。我們通過(guò)node的環(huán)境變量來(lái)匹配我們的默認(rèn)的接口url前綴骑篙。axios.defaults.baseURL可以設(shè)置axios的默認(rèn)請(qǐng)求地址就不多說(shuō)了。
// 環(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';
}elseif(process.env.NODE_ENV =='production') {? ? ? ?
?axios.defaults.baseURL ='https://www.production.com';
}
設(shè)置請(qǐng)求超時(shí)
通過(guò)axios.defaults.timeout設(shè)置默認(rèn)的請(qǐng)求超時(shí)時(shí)間森书。例如超過(guò)了10s靶端，就會(huì)告知用戶(hù)當(dāng)前請(qǐng)求超時(shí)，請(qǐng)刷新等凛膏。
axios.defaults.timeout = 10000;復(fù)制代碼
post請(qǐng)求頭的設(shè)置
post請(qǐng)求的時(shí)候杨名，我們需要加上一個(gè)請(qǐng)求頭，所以可以在這里進(jìn)行一個(gè)默認(rèn)的設(shè)置猖毫，即設(shè)置post的請(qǐng)求頭為application/x-www-form-urlencoded;charset=UTF-8
axios.defaults.headers.post['Content-Type'] ='application/json;charset=UTF-8';復(fù)制代碼
請(qǐng)求攔截
我們?cè)诎l(fā)送請(qǐng)求前可以進(jìn)行一個(gè)請(qǐng)求的攔截台谍，為什么要攔截呢，我們攔截請(qǐng)求是用來(lái)做什么的呢吁断？比如，有些請(qǐng)求是需要用戶(hù)登錄之后才能訪(fǎng)問(wèn)的，或者post請(qǐng)求的時(shí)候英遭，我們需要序列化我們提交的數(shù)據(jù)务唐。這時(shí)候，我們可以在請(qǐng)求被發(fā)送之前進(jìn)行一個(gè)攔截又兵，從而進(jìn)行我們想要的操作任柜。
請(qǐng)求攔截
// 先導(dǎo)入vuex,因?yàn)槲覀円褂玫嚼锩娴臓顟B(tài)對(duì)象
// vuex的路徑根據(jù)自己的路徑去寫(xiě)import store from'@/store/index';
// 請(qǐng)求攔截器
axios.interceptors.request.use(
????config?=>?{
????????//?每次發(fā)送請(qǐng)求之前判斷vuex中是否存在token????????
????????//?如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token沛厨，這樣后臺(tái)根據(jù)token判斷你的登錄情況
????????//?即使本地存在token宙地，也有可能token是過(guò)期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷?
????????const?token?=?store.state.token;
????????token?&&?(config.headers.Authorization?=?token);
????????return?config;
????},
????error?=>?{
????????return?Promise.error(error);
????})
這里說(shuō)一下token逆皮，一般是在登錄完成之后宅粥，將用戶(hù)的token通過(guò)localStorage或者cookie存在本地，然后用戶(hù)每次在進(jìn)入頁(yè)面的時(shí)候（即在main.js中）电谣，會(huì)首先從本地存儲(chǔ)中讀取token粹胯，如果token存在說(shuō)明用戶(hù)已經(jīng)登陸過(guò)蓖柔，則更新vuex中的token狀態(tài)。然后风纠，在每次請(qǐng)求接口的時(shí)候况鸣，都會(huì)在請(qǐng)求的header中攜帶token，后臺(tái)人員就可以根據(jù)你攜帶的token來(lái)判斷你的登錄是否過(guò)期竹观，如果沒(méi)有攜帶镐捧，則說(shuō)明沒(méi)有登錄過(guò)。這時(shí)候或許有些小伙伴會(huì)有疑問(wèn)了臭增，就是每個(gè)請(qǐng)求都攜帶token懂酱，那么要是一個(gè)頁(yè)面不需要用戶(hù)登錄就可以訪(fǎng)問(wèn)的怎么辦呢？其實(shí)誊抛，你前端的請(qǐng)求可以攜帶token列牺，但是后臺(tái)可以選擇不接收啊拗窃！
響應(yīng)的攔截
axios.interceptors.response.use(
????response?=>?{
????????//?如果返回的狀態(tài)碼為200瞎领，說(shuō)明接口請(qǐng)求成功，可以正常拿到數(shù)據(jù)?????
????????//?否則的話(huà)拋出錯(cuò)誤
????????if?(response.status?===?200)?{
????????????return?Promise.resolve(response);
????????}?else?{
????????????return?Promise.reject(response);
????????}
????},
????//?服務(wù)器狀態(tài)碼不是2開(kāi)頭的的情況
????//?這里可以跟你們的后臺(tái)開(kāi)發(fā)人員協(xié)商好統(tǒng)一的錯(cuò)誤狀態(tài)碼????
????//?然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作随夸，例如登錄過(guò)期提示九默，錯(cuò)誤提示等等
????//?下面列舉幾個(gè)常見(jiàn)的操作，其他需求可自行擴(kuò)展
????error?=>?{
????????if?(error.response.status)?{
????????????switch?(error.response.status)?{
????????????????//?401:?未登錄
????????????????//?未登錄則跳轉(zhuǎn)登錄頁(yè)面宾毒，并攜帶當(dāng)前頁(yè)面的路徑
????????????????//?在登錄成功后返回當(dāng)前頁(yè)面驼修，這一步需要在登錄頁(yè)操作。????????????????
????????????????case?401:
????????????????????router.replace({
????????????????????????path:?'/login',
????????????????????????query:?{
????????????????????????????redirect:?router.currentRoute.fullPath
????????????????????????}
????????????????????});
????????????????????break;
????????????????????//?403?token過(guò)期
????????????????????//?登錄過(guò)期對(duì)用戶(hù)進(jìn)行提示
????????????????????//?清除本地token和清空vuex中token對(duì)象
????????????????????//?跳轉(zhuǎn)登錄頁(yè)面????????????????
????????????????case?403:
????????????????????Toast({
????????????????????????message:?'登錄過(guò)期诈铛，請(qǐng)重新登錄',
????????????????????????duration:?1000,
????????????????????????forbidClick:?true
????????????????????});
????????????????????//?清除token
????????????????????localStorage.removeItem('token');
????????????????????store.commit('loginSuccess',?null);
????????????????????//?跳轉(zhuǎn)登錄頁(yè)面乙各，并將要瀏覽的頁(yè)面fullPath傳過(guò)去，登錄成功后跳轉(zhuǎn)需要訪(fǎng)問(wèn)的頁(yè)面?
????????????????????setTimeout(()?=>?{
????????????????????????router.replace({
????????????????????????????path:?'/login',
????????????????????????????query:?{
????????????????????????????????redirect:?router.currentRoute.fullPath
????????????????????????????}
????????????????????????});
????????????????????},?1000);
????????????????????break;
????????????????????//?404請(qǐng)求不存在
????????????????case?404:
????????????????????Toast({
????????????????????????message:?'網(wǎng)絡(luò)請(qǐng)求不存在',
????????????????????????duration:?1500,
????????????????????????forbidClick:?true
????????????????????});
????????????????????break;
????????????????????//?其他錯(cuò)誤幢竹，直接拋出錯(cuò)誤提示
????????????????default:
????????????????????Toast({
????????????????????????message:?error.response.data.message,
????????????????????????duration:?1500,
????????????????????????forbidClick:?true
????????????????????});
????????????}
????????????return?Promise.reject(error.response);
????????}
????}
);
響應(yīng)攔截器很好理解觅丰，就是服務(wù)器返回給我們的數(shù)據(jù)，我們?cè)谀玫街翱梢詫?duì)他進(jìn)行一些處理妨退。例如上面的思想：如果后臺(tái)返回的狀態(tài)碼是200妇萄，則正常返回?cái)?shù)據(jù)，否則的根據(jù)錯(cuò)誤的狀態(tài)碼類(lèi)型進(jìn)行一些我們需要的錯(cuò)誤咬荷，其實(shí)這里主要就是進(jìn)行了錯(cuò)誤的統(tǒng)一處理和沒(méi)登錄或登錄過(guò)期后調(diào)整登錄頁(yè)的一個(gè)操作冠句。
要注意的是，上面的Toast()方法幸乒，是我引入的vant庫(kù)中的toast輕提示組件懦底，你根據(jù)你的ui庫(kù)，對(duì)應(yīng)使用你的一個(gè)提示組件罕扎。
封裝get方法和post方法
我們常用的ajax請(qǐng)求方法有g(shù)et聚唐、post丐重、put等方法，相信小伙伴都不會(huì)陌生杆查。axios對(duì)應(yīng)的也有很多類(lèi)似的方法扮惦，不清楚的可以看下文檔。但是為了簡(jiǎn)化我們的代碼亲桦，我們還是要對(duì)其進(jìn)行一個(gè)簡(jiǎn)單的封裝崖蜜。下面我們主要封裝兩個(gè)方法：get和post。
get方法：我們通過(guò)定義一個(gè)get函數(shù)客峭，get函數(shù)有兩個(gè)參數(shù)豫领，第一個(gè)參數(shù)表示我們要請(qǐng)求的url地址，第二個(gè)參數(shù)是我們要攜帶的請(qǐng)求參數(shù)舔琅。get函數(shù)返回一個(gè)promise對(duì)象等恐，當(dāng)axios其請(qǐng)求成功時(shí)resolve服務(wù)器返回 值，請(qǐng)求失敗時(shí)reject錯(cuò)誤值备蚓。最后通過(guò)export拋出get函數(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方法必須要使用對(duì)提交從參數(shù)對(duì)象進(jìn)行序列化的操作，所以這里我們通過(guò)node的qs模塊來(lái)序列化我們的參數(shù)粗悯。這個(gè)很重要虚循，如果沒(méi)有序列化操作，后臺(tái)是拿不到你提交的數(shù)據(jù)的样傍。這就是文章開(kāi)頭我們import QS from 'qs';的原因横缔。如果不明白序列化是什么意思的，就百度一下吧衫哥，答案一大堆茎刚。
export?function?post(url,?params)?{
????return?new?Promise((resolve,?reject)?=>?{
????????axios.post(url,?params)
????????????.then(res?=>?{
????????????????resolve(res.data);
????????????})
????????????.catch(err?=>?{
????????????????reject(err.data)
????????????})
????});
}
這里有個(gè)小細(xì)節(jié)說(shuō)下，axios.get()方法和axios.post()在提交數(shù)據(jù)時(shí)參數(shù)的書(shū)寫(xiě)方式還是有區(qū)別的撤逢。區(qū)別就是膛锭，get的第二個(gè)參數(shù)是一個(gè){}，然后這個(gè)對(duì)象的params屬性值是一個(gè)參數(shù)對(duì)象的蚊荣。而post的第二個(gè)參數(shù)就是一個(gè)參數(shù)對(duì)象初狰。兩者略微的區(qū)別要留意哦！
>need-to-insert-img
axios的封裝基本就完成了互例，下面再簡(jiǎn)單說(shuō)下api的統(tǒng)一管理奢入。
整齊的api就像電路板一樣，即使再?gòu)?fù)雜也能很清晰整個(gè)線(xiàn)路媳叨。上面說(shuō)了腥光，我們會(huì)新建一個(gè)api.js,然后在這個(gè)文件中存放我們所有的api接口关顷。
首先我們?cè)赼pi.js中引入我們封裝的get和post方法
/**? ? * api接口統(tǒng)一管理 */import { get, post } from'./http'復(fù)制代碼
現(xiàn)在，例如我們有這樣一個(gè)接口武福，是一個(gè)post請(qǐng)求：
http://www.baiodu.com/api/v1/users/my_address/address_edit_before復(fù)制代碼
我們可以在api.js中這樣封裝：
exportconst apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);
我們定義了一個(gè)apiAddress方法议双，這個(gè)方法有一個(gè)參數(shù)p，p是我們請(qǐng)求接口時(shí)攜帶的參數(shù)對(duì)象艘儒。而后調(diào)用了我們封裝的post方法聋伦，post方法的第一個(gè)參數(shù)是我們的接口地址，第二個(gè)參數(shù)是apiAddress的p參數(shù)界睁，即請(qǐng)求接口時(shí)攜帶的參數(shù)對(duì)象觉增。最后通過(guò)export導(dǎo)出apiAddress。
然后在我們的頁(yè)面中可以這樣調(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接口翻斟，并且提供了兩個(gè)參數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? apiAddress({
????????????????????type: 0,? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ?sort: 1
? ? ? ? ? ? ? ? ? ? ? ? ? ? })
????????????????????????.then(res => {
????????? ? ? ? ? ? ? ? // 獲取數(shù)據(jù)成功后的其他操作? ? ?
? ? ? ? ? ? ? ????????? })? ? ? ? ? ? ? ? ? ??
????????????}? ? ? ? ? ?
? ?}}
其他的api接口逾礁，就在pai.js中繼續(xù)往下面擴(kuò)展就可以了。友情提示访惜，為每個(gè)接口寫(xiě)好注釋哦｀诼摹！债热！
api接口管理的一個(gè)好處就是砾嫉，我們把a(bǔ)pi統(tǒng)一集中起來(lái)，如果后期需要修改接口窒篱，我們就直接在api.js中找到對(duì)應(yīng)的修改就好了焕刮，而不用去每一個(gè)頁(yè)面查找我們的接口然后再修改會(huì)很麻煩。關(guān)鍵是墙杯，萬(wàn)一修改的量比較大配并，就規(guī)格gg了。還有就是如果直接在我們的業(yè)務(wù)代碼修改接口高镐，一不小心還容易動(dòng)到我們的業(yè)務(wù)代碼造成不必要的麻煩溉旋。
好了，最后把完成的axios封裝代碼奉上嫉髓。
/**axios封裝 * 請(qǐng)求攔截观腊、相應(yīng)攔截、錯(cuò)誤統(tǒng)一處理 */
import axios from'axios';
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/';
? ? ?}
// 請(qǐng)求超時(shí)時(shí)間
axios.defaults.timeout = 10000;
// post請(qǐng)求頭
axios.defaults.headers.post['Content-Type'] ='application/json;charset=UTF-8';
// 請(qǐng)求攔截器
axios.interceptors.request.use(
? ? ? ? config => {
? ? ? ? // 每次發(fā)送請(qǐng)求之前判斷是否存在token算行，如果存在恕沫，則統(tǒng)一在http請(qǐng)求的header都加上token，不用每次請(qǐng)求都手動(dòng)添加了?
?? ? ? // 即使本地存在token纱意，也有可能token是過(guò)期的婶溯，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷
? ? ? ? const token = store.state.token;
? ? ? ? ?token && (config.headers.Authorization = token);returnconfig;?
?? ? ? },?
?? ? ? error => {returnPromise.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)登錄頁(yè)面，并攜帶當(dāng)前頁(yè)面的路徑????????????????
????????????????//?在登錄成功后返回當(dāng)前頁(yè)面，這一步需要在登錄頁(yè)操作迄委。????????????????
????????????????case?401:????????????????????
????????????????????router.replace({????????????????????????
????????????????????????path:?'/login',????????????????????????
????????????????????????query:?{?redirect:?router.currentRoute.fullPath?}?
????????????????????});
????????????????????break;
????????????????//?403?token過(guò)期????????????????
????????????????//?登錄過(guò)期對(duì)用戶(hù)進(jìn)行提示????????????????
????????????????//?清除本地token和清空vuex中token對(duì)象????????????????
????????????????//?跳轉(zhuǎn)登錄頁(yè)面????????????????
????????????????case?403:?????????????????????
????????????????????Toast({????????????????????????
????????????????????????message:?'登錄過(guò)期褐筛，請(qǐng)重新登錄',????????????????????????
????????????????????????duration:?1000,????????????????????????
????????????????????????forbidClick:?true????????????????????
????????????????????});????????????????????
????????????????????//?清除token????????????????????
????????????????????localStorage.removeItem('token');????????????????????
????????????????????store.commit('loginSuccess',?null);????????????????????
????????????????????//?跳轉(zhuǎn)登錄頁(yè)面，并將要瀏覽的頁(yè)面fullPath傳過(guò)去叙身，登錄成功后跳轉(zhuǎn)需要訪(fǎng)問(wèn)的頁(yè)面
????????????????????setTimeout(()?=>?{????????????????????????
????????????????????????router.replace({????????????????????????????
????????????????????????????path:?'/login',????????????????????????????
????????????????????????????query:?{?
????????????????????????????????redirect:?router.currentRoute.fullPath?
????????????????????????????}????????????????????????
????????????????????????});????????????????????
????????????????????},?1000);????????????????????
????????????????????break;?
????????????????//?404請(qǐng)求不存在????????????????
????????????????case?404:????????????????????
????????????????????Toast({????????????????????????
????????????????????????message:?'網(wǎng)絡(luò)請(qǐng)求不存在',????????????????????????
????????????????????????duration:?1500,????????????????????????
????????????????????????forbidClick:?true????????????????????
????????????????????});????????????????????
????????????????break;????????????????
????????????????//?其他錯(cuò)誤渔扎，直接拋出錯(cuò)誤提示????????????????
????????????????default:????????????????????
????????????????????Toast({????????????????????????
????????????????????????message:?error.response.data.message,????????????????????????
????????????????????????duration:?1500,????????????????????????
????????????????????????forbidClick:?true????????????????????
????????????????????});????????????
????????????}????????????
????????????return?Promise.reject(error.response);????????
????????}???????
????}
);
/**?
?*?get方法，對(duì)應(yīng)get請(qǐng)求?
?*?@param?{String}?url?[請(qǐng)求的url地址]?
?*?@param?{Object}?params?[請(qǐng)求時(shí)攜帶的參數(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方法信轿，對(duì)應(yīng)post請(qǐng)求?
?*?@param?{String}?url?[請(qǐng)求的url地址]?
?*?@param?{Object}?params?[請(qǐng)求時(shí)攜帶的參數(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)????????
????????})????
????});
}
如果喜歡晃痴，就給個(gè)??吧(*^▽^*)
axios的封裝根據(jù)需求的不同而不同。這里非常感謝評(píng)論里一些很中肯的建議财忽，我也對(duì)此進(jìn)行了思考和針對(duì)不同需求的改善倘核。主要有以下改變：
1.優(yōu)化axios封裝，去掉之前的get和post
2.斷網(wǎng)情況處理
3.更加模塊化的api管理
4.接口域名有多個(gè)的情況
5.api掛載到vue.prototype上省去引入的步驟
http.js中axios封裝的優(yōu)化即彪，先直接貼代碼：
/**
?*?axios封裝
?*?請(qǐng)求攔截紧唱、響應(yīng)攔截、錯(cuò)誤統(tǒng)一處理
?*/
import?axios?from?'axios';
import?router?from?'../router';
import?store?from?'../store/index';
import?{?Toast?}?from?'vant';
/**?
?*?提示函數(shù)?
?*?禁止點(diǎn)擊蒙層隶校、顯示一秒后關(guān)閉
?*/
const?tip?=?msg?=>?{????
????Toast({????????
????????message:?msg,????????
????????duration:?1000,????????
????????forbidClick:?true????
????});
}
/**?
?*?跳轉(zhuǎn)登錄頁(yè)
?*?攜帶當(dāng)前頁(yè)面路由漏益，以期在登錄頁(yè)面完成登錄后返回當(dāng)前頁(yè)面
?*/
const?toLogin?=?()?=>?{
????router.replace({
????????path:?'/login',????????
????????query:?{
????????????redirect:?router.currentRoute.fullPath
????????}
????});
}
/**?
?*?請(qǐng)求失敗后的錯(cuò)誤統(tǒng)一處理?
?*?@param?{Number}?status?請(qǐng)求失敗的狀態(tài)碼
?*/
const?errorHandle?=?(status,?other)?=>?{
????//?狀態(tài)碼判斷
????switch?(status)?{
????????//?401:?未登錄狀態(tài)，跳轉(zhuǎn)登錄頁(yè)
????????case?401:
????????????toLogin();
????????????break;
????????//?403?token過(guò)期
????????//?清除token并跳轉(zhuǎn)登錄頁(yè)
????????case?403:
????????????tip('登錄過(guò)期深胳，請(qǐng)重新登錄');
????????????localStorage.removeItem('token');
????????????store.commit('loginSuccess',?null);
????????????setTimeout(()?=>?{
????????????????toLogin();
????????????},?1000);
????????????break;
????????//?404請(qǐng)求不存在
????????case?404:
????????????tip('請(qǐng)求的資源不存在');?
????????????break;
????????default:
????????????console.log(other);???
????????}}
//?創(chuàng)建axios實(shí)例
var?instance?=?axios.create({????timeout:?1000?*?12});
//?設(shè)置post請(qǐng)求頭
instance.defaults.headers.post['Content-Type']?=?'application/json';
/**?
?*?請(qǐng)求攔截器?
?*?每次請(qǐng)求前绰疤，如果存在token則在請(qǐng)求頭中攜帶token?
?*/?
instance.interceptors.request.use(????
????config?=>?{????????
????????//?登錄流程控制中，根據(jù)本地是否存在token判斷用戶(hù)的登錄情況????????
????????//?但是即使token存在舞终，也有可能token是過(guò)期的轻庆，所以在每次的請(qǐng)求頭中攜帶token????????
????????//?后臺(tái)根據(jù)攜帶的token判斷用戶(hù)的登錄情況，并返回給我們對(duì)應(yīng)的狀態(tài)碼????????
????????//?而后我們可以在響應(yīng)攔截器中权埠，根據(jù)狀態(tài)碼進(jìn)行一些統(tǒng)一的操作榨了。????????
????????const?token?=?store.state.token;????????
????????token?&&?(config.headers.Authorization?=?token);????????
????????return?config;????
????},????
????error?=>?Promise.error(error))
//?響應(yīng)攔截器
instance.interceptors.response.use(????
????//?請(qǐng)求成功
????res?=>?res.status?===?200???Promise.resolve(res)?:?Promise.reject(res),????
????//?請(qǐng)求失敗
????error?=>?{
????????const?{?response?}?=?error;
????????if?(response)?{
????????????//?請(qǐng)求已發(fā)出煎谍，但是不在2xx的范圍?
????????????errorHandle(response.status,?response.data.message);
????????????return?Promise.reject(response);
????????}?else?{
????????????//?處理斷網(wǎng)的情況
????????????//?eg:請(qǐng)求超時(shí)或斷網(wǎng)時(shí)攘蔽，更新state的network狀態(tài)
????????????//?network狀態(tài)在app.vue中控制著一個(gè)全局的斷網(wǎng)提示組件的顯示隱藏
????????????//?關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)，會(huì)在斷網(wǎng)組件中說(shuō)明
????????????store.commit('changeNetwork',?false);
????????}
????});
export?default?instance
這個(gè)axios和之前的大同小異呐粘，做了如下幾點(diǎn)改變：
1.去掉了之前get和post方法的封裝满俗，通過(guò)創(chuàng)建一個(gè)axios實(shí)例然后export default方法導(dǎo)出，這樣使用起來(lái)更靈活一些作岖。
2.去掉了通過(guò)環(huán)境變量控制baseUrl的值唆垃。考慮到接口會(huì)有多個(gè)不同域名的情況痘儡，所以準(zhǔn)備通過(guò)js變量來(lái)控制接口域名辕万。這點(diǎn)具體在api里會(huì)介紹。
3.增加了請(qǐng)求超時(shí)，即斷網(wǎng)狀態(tài)的處理渐尿。說(shuō)下思路醉途，當(dāng)斷網(wǎng)時(shí)，通過(guò)更新vuex中network的狀態(tài)來(lái)控制斷網(wǎng)提示組件的顯示隱藏砖茸。斷網(wǎng)提示一般會(huì)有重新加載數(shù)據(jù)的操作隘擎，這步會(huì)在后面對(duì)應(yīng)的地方介紹。
4.公用函數(shù)進(jìn)行抽出凉夯，簡(jiǎn)化代碼货葬，盡量保證單一職責(zé)原則。
下面說(shuō)下api這塊劲够，考慮到一下需求：
1.更加模塊化
2.更方便多人開(kāi)發(fā)震桶，有效減少解決命名沖突
3.處理接口域名有多個(gè)情況
這里這里呢新建了一個(gè)api文件夾，里面有一個(gè)index.js和一個(gè)base.js再沧，以及多個(gè)根據(jù)模塊劃分的接口js文件尼夺。index.js是一個(gè)api的出口，base.js管理接口域名炒瘸，其他js則用來(lái)管理各個(gè)模塊的接口淤堵。
先放index.js代碼：
/**?
?*?api接口的統(tǒng)一出口
?*/
//?文章模塊接口
import?article?from?'@/api/article';
//?其他模塊的接口……
//?導(dǎo)出接口
export?default?{????
????article,
????//?……
}
index.js是一個(gè)api接口的出口，這樣就可以把a(bǔ)pi接口根據(jù)功能劃分為多個(gè)模塊顷扩，利于多人協(xié)作開(kāi)發(fā)拐邪，比如一個(gè)人只負(fù)責(zé)一個(gè)模塊的開(kāi)發(fā)等，還能方便每個(gè)模塊中接口的命名哦隘截。
base.js:
/**
?*?接口域名的管理
?*/
const?base?=?{????
????sq:?'https://xxxx111111.com/api/v1',????
????bd:?'http://xxxxx22222.com/api'
}
export?default?base;
通過(guò)base.js來(lái)管理我們的接口域名扎阶，不管有多少個(gè)都可以通過(guò)這里進(jìn)行接口的定義。即使修改起來(lái)婶芭，也是很方便的东臀。
最后就是接口模塊的說(shuō)明，例如上面的article.js:
/**
?*?article模塊接口列表
?*/
import?base?from?'./base';?//?導(dǎo)入接口域名列表
import?axios?from?'@/utils/http';?//?導(dǎo)入http中創(chuàng)建的axios實(shí)例
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.通過(guò)直接引入我們封裝好的axios實(shí)例犀农，然后定義接口惰赋、調(diào)用axios實(shí)例并返回，可以更靈活的使用axios呵哨，比如你可以對(duì)post請(qǐng)求時(shí)提交的數(shù)據(jù)進(jìn)行一個(gè)qs序列化的處理等赁濒。
2.請(qǐng)求的配置更靈活，你可以針對(duì)某個(gè)需求進(jìn)行一個(gè)不同的配置孟害。關(guān)于配置的優(yōu)先級(jí)拒炎，axios文檔說(shuō)的很清楚，這個(gè)順序是：在?lib/defaults.js?找到的庫(kù)的默認(rèn)值挨务，然后是實(shí)例的?defaults?屬性击你，最后是請(qǐng)求的?config?參數(shù)玉组。后者將優(yōu)先于前者。
3.restful風(fēng)格的接口丁侄，也可以通過(guò)這種方式靈活的設(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的原型上
然后我們可以在頁(yè)面中這樣調(diào)用接口，eg：
methods:?{????
????onLoad(id)?{??????
????????this.$api.article.articleDetail(id,?{????????
????????????api:?123??????
????????}).then(res=>?{
????????????//?執(zhí)行某些操作??????
????????})????
????}??
}復(fù)制代碼
再提一下斷網(wǎng)的處理户辱，這里只做一個(gè)簡(jiǎn)單的示例：
<template>??
????<div?id="app">????
????????<div?v-if="!network">??????
????????????<h3>我沒(méi)網(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:?{????
????????????//?通過(guò)跳轉(zhuǎn)一個(gè)空頁(yè)面再返回的方式來(lái)實(shí)現(xiàn)刷新當(dāng)前頁(yè)面數(shù)據(jù)的目的
????????????onRefresh?()?{??????
????????????????this.$router.replace('/refresh')????
????????????}??
????????}
????}
</script>
這是app.vue鸵钝，這里簡(jiǎn)單演示一下斷網(wǎng)。在http.js中介紹了庐镐，我們會(huì)在斷網(wǎng)的時(shí)候恩商，來(lái)更新vue中network的狀態(tài)，那么這里我們根據(jù)network的狀態(tài)來(lái)判斷是否需要加載這個(gè)斷網(wǎng)組件必逆。斷網(wǎng)情況下怠堪，加載斷網(wǎng)組件，不加載對(duì)應(yīng)頁(yè)面的組件名眉。當(dāng)點(diǎn)擊刷新的時(shí)候粟矿，我們通過(guò)跳轉(zhuǎn)refesh頁(yè)面然后立即返回的方式來(lái)實(shí)現(xiàn)重新獲取數(shù)據(jù)的操作。因此我們需要新建一個(gè)refresh.vue頁(yè)面损拢，并在其beforeRouteEnter鉤子中再返回當(dāng)前頁(yè)面陌粹。
// refresh.vue
beforeRouteEnter (to, from, next) {
? ? next(vm => {
? ? ? ? ? ? ? ? ? ? vm.$router.replace(from.fullPath)
? ? ? ? ? ? })
? ? }
這是一種全局通用的斷網(wǎng)提示，當(dāng)然了福压，也可以根據(jù)自己的項(xiàng)目需求操作掏秩。具體操作就仁者見(jiàn)仁智者見(jiàn)智了。
作者：chinaBerg
鏈接：https://juejin.im/post/5b55c118f265da0f6f1aa354
來(lái)源：掘金
著作權(quán)歸作者所有荆姆。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)蒙幻，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
