vue+axios+element ui 實現(xiàn)全局loading加載示例
實現(xiàn)全局loading加載
分析需求,我們只需要在請求發(fā)起的時候開始loading,響應(yīng)結(jié)束的時候關(guān)閉loading,就這么簡單 對不對?
import axios from 'axios';
import { Message, Loading } from 'element-ui';
import Cookies from 'js-cookie';
import router from '@/router/index'
let loading //定義loading變量
function startLoading() { //使用Element loading-start 方法
loading = Loading.service({
lock: true,
text: '加載中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading() { //使用Element loading-close 方法
loading.close()
}
//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事兒就是將同一時刻的請求合并。
//聲明一個變量 needLoadingRequestCount,每次調(diào)用showFullScreenLoading方法 needLoadingRequestCount + 1。
//調(diào)用tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount為 0 時,結(jié)束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
//http request 攔截器
axios.interceptors.request.use(
config => {
var token = ''
if(typeof Cookies.get('user') === 'undefined'){
//此時為空
}else {
token = JSON.parse(Cookies.get('user')).token
}//注意使用的時候需要引入cookie方法,推薦js-cookie
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/json'
}
if(token != ''){
config.headers.token = token;
}
showFullScreenLoading()
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 攔截器
axios.interceptors.response.use(
response => {
//當(dāng)返回信息為未登錄或者登錄失效的時候重定向為登錄頁面
if(response.data.code == 'W_100004' || response.data.message == '用戶未登錄或登錄超時,請登錄!'){
router.push({
path:"/",
querry:{redirect:router.currentRoute.fullPath}//從哪個頁面跳轉(zhuǎn)
})
}
tryHideFullScreenLoading()
return response;
},
error => {
return Promise.reject(error)
}
)
以上這篇vue+axios+element ui 實現(xiàn)全局loading加載示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue引入iconfont圖標(biāo)庫的優(yōu)雅實戰(zhàn)記錄
使用組件庫時,圖標(biāo)往往不能滿足需求,所以我們常常需要用到第三方圖標(biāo)庫,這篇文章主要給大家介紹了關(guān)于vue引入iconfont的相關(guān)資料,需要的朋友可以參考下2021-06-06
Vue elementUI 自定義表單模板組件功能實現(xiàn)
在項目開發(fā)中,我們會遇到這種需求,在管理后臺添加自定義表單,在指定的頁面使用定義好的表單,這篇文章主要介紹了Vue elementUI 自定義表單模板組件,需要的朋友可以參考下2022-12-12
在Vue3.x中實現(xiàn)類似React.lazy效果的方法詳解
React 的 React.lazy 功能為組件懶加載提供了原生支持,允許開發(fā)者將組件渲染推遲到實際需要時再進(jìn)行,雖然 Vue3.x 沒有一個直接對應(yīng)的 lazy 函數(shù),但我們可以通過動態(tài)導(dǎo)入和 defineAsyncComponent 方法來實現(xiàn)類似的效果,需要的朋友可以參考下2024-03-03
vue3項目中配置sass,vite報錯Undefined mixin問題
這篇文章主要介紹了vue3項目中配置sass,vite報錯Undefined mixin問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
在vue中實現(xiàn)某一些路由頁面隱藏導(dǎo)航欄的功能操作
這篇文章主要介紹了在vue中實現(xiàn)某一些路由頁面隱藏導(dǎo)航欄的功能操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的相關(guān)資料,在使用Vue.js開發(fā)單頁面應(yīng)用時常常會遇到路由跳轉(zhuǎn)傳參的需求,需要的朋友可以參考下2023-07-07
Vue+tracking.js 實現(xiàn)前端人臉檢測功能
這篇文章主要介紹了Vue+tracking.js 實現(xiàn)前端人臉檢測功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04

