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 相关文章推荐
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
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/06/29 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
小程序实现列表多个批量倒计时
2021/01/29 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python中__slots__用法实例
2015/06/04 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python学习入门之区块链详解
2017/07/25 Python
Python3数字求和的实例
2019/02/19 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Foreo国际站:Foreo International
2018/10/29 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
本科毕业生专业自荐书范文
2014/02/05 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
社区工作者感言
2014/03/02 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
环保倡议书怎么写
2014/05/16 职场文书
2014年大学班长工作总结
2014/11/14 职场文书