一、axios的封裝
在vue項目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫捞魁，它是基于promise的http庫凯傲，可運(yùn)行在瀏覽器端和node.js中骂维。他有很多優(yōu)秀的特性楚殿，例如攔截請求和響應(yīng)、取消請求结缚、轉(zhuǎn)換json损晤、客戶端防御XSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護(hù)红竭，直接推薦我們使用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)境變量來匹配我們的默認(rèn)的接口url前綴。axios.defaults.baseURL可以設(shè)置axios的默認(rèn)請求地址就不多說了黍聂。
// 環(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è)置默認(rèn)的請求超時時間躺苦。例如超過了10s，就會告知用戶當(dāng)前請求超時产还，請刷新等圾另。
axios.defaults.timeout = 10000;
post請求頭的設(shè)置
post請求的時候，我們需要加上一個請求頭雕沉，所以可以在這里進(jìn)行一個默認(rèn)的設(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ā)送請求前可以進(jìn)行一個請求的攔截去件，為什么要攔截呢坡椒，我們攔截請求是用來做什么的呢？比如尤溜，有些請求是需要用戶登錄之后才能訪問的倔叼，或者post請求的時候，我們需要序列化我們提交的數(shù)據(jù)宫莱。這時候丈攒，我們可以在請求被發(fā)送之前進(jìn)行一個攔截，從而進(jìn)行我們想要的操作授霸。
請求攔截
// 先導(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)進(jìn)行判斷
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})
這里說一下token，一般是在登錄完成之后辛辨，將用戶的token通過localStorage或者cookie存在本地捕捂，然后用戶每次在進(jìn)入頁面的時候（即在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)碼進(jìn)行一些操作，例如登錄過期提示腌逢，錯誤提示等等
// 下面列舉幾個常見的操作降淮，其他需求可自行擴(kuò)展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登錄
// 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑
// 在登錄成功后返回當(dāng)前頁面搏讶，這一步需要在登錄頁操作佳鳖。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token過期
// 登錄過期對用戶進(jìn)行提示
// 清除本地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ù)穿挨，我們在拿到之前可以對他進(jìn)行一些處理。例如上面的思想：如果后臺返回的狀態(tài)碼是200肴盏，則正常返回數(shù)據(jù)科盛，否則的根據(jù)錯誤的狀態(tài)碼類型進(jìn)行一些我們需要的錯誤，其實這里主要就是進(jìn)行了錯誤的統(tǒng)一處理和沒登錄或登錄過期后調(diào)整登錄頁的一個操作叁鉴。
要注意的是土涝，上面的Toast()方法，是我引入的vant庫中的toast輕提示組件幌墓，你根據(jù)你的ui庫但壮，對應(yīng)使用你的一個提示組件。
封裝get方法和post方法
我們常用的ajax請求方法有g(shù)et常侣、post蜡饵、put等方法，相信小伙伴都不會陌生胳施。axios對應(yīng)的也有很多類似的方法溯祸，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進(jìn)行一個簡單的封裝焦辅。下面我們主要封裝兩個方法：get和post博杖。
get方法：我們通過定義一個get函數(shù)，get函數(shù)有兩個參數(shù)筷登，第一個參數(shù)表示我們要請求的url地址剃根，第二個參數(shù)是我們要攜帶的請求參數(shù)。get函數(shù)返回一個promise對象前方，當(dāng)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ù)對象進(jìn)行序列化的操作渣慕，所以這里我們通過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)
})
});
}
這里有個小細(xì)節(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ù)往下面擴(kuò)展就可以了羡鸥。友情提示蔑穴，為每個接口寫好注釋哦！＞逶 存和！
api接口管理的一個好處就是，我們把a(bǔ)pi統(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)進(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)登錄頁面双炕，并攜帶當(dāng)前頁面的路徑
// 在登錄成功后返回當(dāng)前頁面复罐，這一步需要在登錄頁操作。
case 401:
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
});
break;
// 403 token過期
// 登錄過期對用戶進(jìn)行提示
// 清除本地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)
})
});
}
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ù)
* 禁止點(diǎn)擊蒙層施掏、顯示一秒后關(guān)閉
*/
const tip = msg => {
Toast({
message: msg,
duration: 1000,
forbidClick: true
});
}
/**
* 跳轉(zhuǎn)登錄頁
* 攜帶當(dāng)前頁面路由，以期在登錄頁面完成登錄后返回當(dāng)前頁面
*/
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)碼進(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(
// 請求成功
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和之前的大同小異旨袒，做了如下幾點(diǎn)改變：
1.去掉了之前get和post方法的封裝卤材，通過創(chuàng)建一個axios實例然后export default方法導(dǎo)出，這樣使用起來更靈活一些峦失。
2.去掉了通過環(huán)境變量控制baseUrl的值∈趼穑考慮到接口會有多個不同域名的情況尉辑，所以準(zhǔn)備通過js變量來控制接口域名。這點(diǎn)具體在api里會介紹较屿。
3.增加了請求超時隧魄，即斷網(wǎng)狀態(tài)的處理。說下思路隘蝎，當(dāng)斷網(wǎng)時购啄，通過更新vuex中network的狀態(tài)來控制斷網(wǎng)提示組件的顯示隱藏。斷網(wǎng)提示一般會有重新加載數(shù)據(jù)的操作嘱么，這步會在后面對應(yīng)的地方介紹狮含。
4.公用函數(shù)進(jìn)行抽出，簡化代碼，盡量保證單一職責(zé)原則几迄。
下面說下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接口的出口弛姜，這樣就可以把a(bǔ)pi接口根據(jù)功能劃分為多個模塊脐瑰，利于多人協(xié)作開發(fā)，比如一個人只負(fù)責(zé)一個模塊的開發(fā)等娱据，還能方便每個模塊中接口的命名哦蚪黑。
base.js:
/**
* 接口域名的管理
*/
const base = {
sq: 'https://xxxx111111.com/api/v1',
bd: 'http://xxxxx22222.com/api'
}
export default base;
通過base.js來管理我們的接口域名，不管有多少個都可以通過這里進(jìn)行接口的定義中剩。即使修改起來忌穿，也是很方便的。
最后就是接口模塊的說明结啼，例如上面的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ù)進(jìn)行一個qs序列化的處理等。
2.請求的配置更靈活属铁，你可以針對某個需求進(jìn)行一個不同的配置眠寿。關(guān)于配置的優(yōu)先級，axios文檔說的很清楚焦蘑，這個順序是：在 lib/defaults.js 找到的庫的默認(rèn)值盯拱，然后是實例的 defaults 屬性，最后是請求的 config 參數(shù)例嘱。后者將優(yōu)先于前者狡逢。
3.restful風(fēng)格的接口，也可以通過這種方式靈活的設(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)刷新當(dāng)前頁面數(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)頁面的組件草则。當(dāng)點(diǎn)擊刷新的時候，我們通過跳轉(zhuǎn)refesh頁面然后立即返回的方式來實現(xiàn)重新獲取數(shù)據(jù)的操作蟹漓。因此我們需要新建一個refresh.vue頁面炕横，并在其beforeRouteEnter鉤子中再返回當(dāng)前頁面。
// refresh.vue
beforeRouteEnter (to, from, next) {
next(vm => {
vm.$router.replace(from.fullPath)
})
}
這是一種全局通用的斷網(wǎng)提示葡粒，當(dāng)然了份殿，也可以根據(jù)自己的項目需求操作。具體操作就仁者見仁智者見智了嗽交。
如果更多的需求卿嘲，或者說是不一樣的需求，可以根據(jù)自己的需求進(jìn)行一個改進(jìn)夫壁。
