vue+axios+element ui 实现全局loading加载示例
时间:2022-06-25 15:40:43 编辑:袖梨 来源:一聚教程网
实现全局loading加载
分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 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,每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。 //调用tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount为 0 时,结束 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 => { //当返回信息为未登录或者登录失效的时候重定向为登录页面 if (response.data.code == 'W_100004' || response.data.message == '用户未登录或登录超时,请登录!' ){ router.push({ path: "/" , querry:{redirect:router.currentRoute.fullPath} //从哪个页面跳转 }) } tryHideFullScreenLoading() return response; }, error => { return Promise.reject(error) } ) |
相关文章
- 以闪亮之名店长体验流霞季怎么玩 缘溪临霞套装活动介绍 12-31
- 未定事件簿旧梦新生左然篇怎么玩 旧梦新生左然篇活动介绍 12-31
- 未定事件簿左然破浪远行怎么样 12-31
- 桃源深处有人家行医问诊怎么玩 12-31
- 恋与制作人跨年福利有哪些 恋与制作人跨年福利内容介绍 12-31
- 阴阳师协同对弈大乱斗怎么玩 阴阳师协同对弈大乱斗活动介绍 12-31