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

我們所要的說(shuō)的axios的封裝和api接口的統(tǒng)一管理遏片，其實(shí)主要目的就是在幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù)激涤。

一包各、axios的封裝

在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ù)端防御XSRF等宏蛉。所以我們的尤大大也是果斷放棄了對(duì)其官方庫(kù)vue-resource的維護(hù)，直接推薦我們使用axios庫(kù)性置。如果還對(duì)axios不了解的拾并，可以移步axios文檔。

安裝

npm install axios;// 安裝axios

引入

一般我會(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中引入axios

import axios from 'axios'; // 引入axios

import QS from 'qs'; // 引入qs模塊，用來(lái)序列化post類(lèi)型的數(shù)據(jù)季希，后面會(huì)提到

// vant的toast提示框組件褪那，大家可根據(jù)自己的ui組件更改幽纷。

import { Toast } from 'vant';

環(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';

}

else if (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;

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/x-www-form-urlencoded;charset=UTF-8';

請(qǐng)求攔截

我們?cè)诎l(fā)送請(qǐng)求前可以進(jìn)行一個(gè)請(qǐng)求的攔截，為什么要攔截呢沛鸵，我們攔截請(qǐng)求是用來(lái)做什么的呢括勺？比如，有些請(qǐng)求是需要用戶(hù)登錄之后才能訪問(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ù)登錄就可以訪問(wèn)的怎么辦呢执赡？其實(shí)镰踏，你前端的請(qǐng)求可以攜帶token，但是后臺(tái)可以選擇不接收吧澈稀奠伪！

響應(yīng)的攔截

// 響應(yīng)攔截器

axios.interceptors.response.use(? ?

? ? response => {?

? ? ? ? // 如果返回的狀態(tài)碼為200，說(shuō)明接口請(qǐng)求成功首懈，可以正常拿到數(shù)據(jù)? ?

? ? ? ? // 否則的話拋出錯(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)需要訪問(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ù)。

/**

* 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方法：原理同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';的原因。如果不明白序列化是什么意思的遭笋，就百度一下吧，答案一大堆徒探。

/**

* 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è)小細(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ū)別要留意哦！

axios的封裝基本就完成了稚字，下面再簡(jiǎn)單說(shuō)下api的統(tǒng)一管理饲宿。

整齊的api就像電路板一樣，即使再?gòu)?fù)雜也能很清晰整個(gè)線路胆描。上面說(shuō)了瘫想，我們會(huì)新建一個(gè)api.js,然后在這個(gè)文件中存放我們所有的api接口。

首先我們?cè)赼pi.js中引入我們封裝的get和post方法

/**?

* api接口統(tǒng)一管理

*/import{get,post}from'./http'

現(xiàn)在昌讲，例如我們有這樣一個(gè)接口国夜，是一個(gè)post請(qǐng)求：

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);

我們定義了一個(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 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/';

}

// 請(qǐng)求超時(shí)時(shí)間

axios.defaults.timeout = 10000;

// post請(qǐng)求頭

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;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);? ? ? ?

? ? ? ? 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)登錄頁(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)需要訪問(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)? ? ? ?

? ? ? ? })? ?

? ? });

}

api

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/x-www-form-urlencoded';

/**

* 請(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ō)明

? ? ? ? ? ? if (!window.navigator.onLine) {

? ? ? ? ? ? ? store.commit('changeNetwork', false);

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? return Promise.reject(error);

? ? ? ? ? ? }

? ? ? ? }

? ? });

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í)行某些操作? ? ?

? ? ? ? })? ?

? ? }?

}

再提一下斷網(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)? ? ? ?

? ? })? ?

}

鏈接：http://www.reibang.com/p/cac8e979e437