vue+axios+element ui 实现全局loading加载示例


Posted in Javascript onSeptember 11, 2018

实现全局loading加载

分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭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,每次调用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)
 }
)

以上这篇vue+axios+element ui 实现全局loading加载示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
javascript常用的设计模式
Feb 09 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
Webpack之tree-starking 解析
Sep 11 #Javascript
node.js之基础加密算法模块crypto详解
Sep 11 #Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 #Javascript
浅谈Webpack核心模块tapable解析
Sep 11 #Javascript
原生js检测页面加载完毕的实例
Sep 11 #Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 #Javascript
解决vue props 拿不到值的问题
Sep 11 #Javascript
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
写自荐信的七个技巧
2013/10/15 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
函授本科自我鉴定
2014/02/04 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
授权委托书格式模板
2014/04/03 职场文书
事假请假条范文
2014/04/11 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
装修施工安全责任书
2014/07/24 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
《去年的树》教学反思
2016/02/18 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
Java spring单点登录系统
2021/09/04 Java/Android