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