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 相关文章推荐
理解JSON:3分钟课程
Oct 28 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
详解Bootstrap插件
Apr 25 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
vue 实现图片懒加载功能
Dec 31 Vue.js
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
django中的ajax组件教程详解
2018/10/18 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
JS实现图片手风琴效果
2020/04/17 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python字符串string的内置方法实例详解
2018/05/14 Python
Python全排列操作实例分析
2018/07/24 Python
Python中的heapq模块源码详析
2019/01/08 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
电脑教师的教学自我评价
2013/11/26 职场文书
小学语文教师研修日志
2015/11/13 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers