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 相关文章推荐
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
jquery实现图片轮播器
May 23 jQuery
angular将html代码输出为内容的实例
Sep 30 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
javascript实现点击产生随机图形
Jan 25 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
又一个php 分页类实现代码
2009/12/03 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Python读写配置文件的方法
2015/06/03 Python
python实现中文转换url编码的方法
2016/06/14 Python
详解flask入门模板引擎
2018/07/18 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
基于python中__add__函数的用法
2019/11/25 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
同学会邀请书大全
2014/01/12 职场文书
重阳节登山活动方案
2014/02/03 职场文书
读书演讲主持词
2014/03/18 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
龙门石窟导游词
2015/02/02 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android