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删除字符串最后一个字符
Jan 14 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
小程序实现横向滑动日历效果
Oct 21 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
基于empty函数的输出详解
2013/06/17 PHP
php实现文件下载代码分享
2014/08/19 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
laravel自定义分页效果
2017/07/23 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
python机器人行走步数问题的解决
2018/01/29 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
个人考核材料
2014/05/15 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
党小组考察意见
2015/06/02 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
如何判断pytorch是否支持GPU加速
2021/06/01 Python
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android