封裝axios - 簡書

一钝腺、axios的封裝

在vue項目中，和后臺交互獲取數(shù)據(jù)這塊毫目，我們通常使用的是axios庫沟绪，它是基于promise的http庫，可運行在瀏覽器端和node.js中铆隘。他有很多優(yōu)秀的特性鹅士，例如攔截請求和響應、取消請求炫掐、轉換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可以設置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';
}

設置請求超時

通過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';

請求攔截

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

請求攔截

// 先導入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是過期的雪猪，所以在響應攔截器中要對返回狀態(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，但是后臺可以選擇不接收靶僬觥监透！

響應的攔截

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

                // 403 token過期
                // 登錄過期對用戶進行提示
                // 清除本地token和清空vuex中token對象
                // 跳轉登錄頁面                
                case 403:
                     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請求不存在
                case 404:
                    Toast({
                        message: '網(wǎng)絡請求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他錯誤不跟，直接拋出錯誤提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }    
});

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

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

封裝get方法和post方法

我們常用的ajax請求方法有get兰英、post、put等方法供鸠，相信小伙伴都不會陌生畦贸。axios對應的也有很多類似的方法，不清楚的可以看下文檔楞捂。但是為了簡化我們的代碼薄坏，我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法：get和post寨闹。

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

/**
 * get方法塑娇，對應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方法扎筒，對應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ū)別要留意哦！

image

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

整齊的api就像電路板一樣桦卒，即使再復雜也能很清晰整個線路。上面說了棕所，我們會新建一個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ù)對象针贬。而后調用了我們封裝的post方法击费，post方法的第一個參數(shù)是我們的接口地址，第二個參數(shù)是apiAddress的p參數(shù)桦他，即請求接口時攜帶的參數(shù)對象蔫巩。最后通過export導出apiAddress。

然后在我們的頁面中可以這樣調用我們的api接口：

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

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

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

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

/**axios封裝
 * 請求攔截磅崭、相應攔截、錯誤統(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是過期的割岛，所以在響應攔截器中要對返回狀態(tài)進行判斷
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => {        
        return Promise.error(error);    
    })

// 響應攔截器
axios.interceptors.response.use(    
    response => {        
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },
    // 服務器狀態(tài)碼不是200的情況    
    error => {        
        if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登錄                
                // 未登錄則跳轉登錄頁面愉适，并攜帶當前頁面的路徑                
                // 在登錄成功后返回當前頁面，這一步需要在登錄頁操作癣漆。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { redirect: router.currentRoute.fullPath } 
                    });
                    break;
                // 403 token過期                
                // 登錄過期對用戶進行提示                
                // 清除本地token和清空vuex中token對象                
                // 跳轉登錄頁面                
                case 403:                     
                    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請求不存在                
                case 404:                    
                    Toast({                        
                        message: '網(wǎng)絡請求不存在',                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });                    
                break;                
                // 其他錯誤杂曲，直接拋出錯誤提示                
                default:                    
                    Toast({                        
                        message: error.response.data.message,                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });            
            }            
            return Promise.reject(error.response);        
        }       
    }
);
/** 
 * get方法证杭，對應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方法，對應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)化，先直接貼代碼：

<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(0, 0, 0); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">`/**

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

/**

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

/**

跳轉登錄頁
攜帶當前頁面路由攀操，以期在登錄頁面完成登錄后返回當前頁面
*/
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)沼死，跳轉登錄頁
case 401:
toLogin();
break;
// 403 token過期
// 清除token并跳轉登錄頁
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});
// 設置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判斷用戶的登錄情況伸头，并返回給我們對應的狀態(tài)碼
// 而后我們可以在響應攔截器中，根據(jù)狀態(tài)碼進行一些統(tǒng)一的操作舷蟀。
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => Promise.error(error))

// 響應攔截器
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)提示組件的顯示隱藏
// 關于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)，會在斷網(wǎng)組件中說明
if (!window.navigator.onLine) {
store.commit('changeNetwork', false);
} else {
return Promise.reject(error);
}
}
});

export default instance;` </pre>

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

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

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

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

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';
// 其他模塊的接口……

// 導出接口
export default {
article,
// ……
}` </pre>

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;` </pre>

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

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

article模塊接口列表
*/

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

export default article;` </pre>

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

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

3.restful風格的接口轻姿，也可以通過這種方式靈活的設置api接口地址余素。

最后威根，為了方便api的調用，我們需要將其掛載到vue的原型上渣聚。在main.js中：

Vue.prototype.$api = api; // 將api掛載到vue的原型上` </pre>

然后我們可以在頁面中這樣調用接口症歇，eg：

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

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