在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就会纠结自己到底该不该留下来继续等待呢。

所以,这时候,loading动画就是一种缓解等待情绪的方式,当然还有更高端的,比如:骨架屏。有兴趣的朋友可以自行研究,我后续也会找机会分享一下。

下面,开始本文的主要内容,目前我在用的是Vue 2.x版本,ajax请求用的是axios,UI框架用的是elementUI。所以下面的loading用的是UI框架中的组件。

唠叨了这么多,接下来分享一下具体实现的代码(里面很多代码逻辑我已经去掉了,只剩下基础的部分):

代码可放在main.js中。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios' // loading框设置局部刷新,且所有请求完成后关闭loading框
let loading
let needLoadingRequestCount = 0 // 声明一个对象用于存储请求个数
function startLoading () {
loading = Vue.prototype.$loading({
lock: true,
text: '努力加载中...',
background: 'rgba(0,0,0,0.5)',
target: document.querySelector('.loading-area') // 设置加载动画区域
})
}
function endLoading () {
loading.close()
}
function showFullScreenLoading () {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
function hideFullScreenLoading () {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
} // axios
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '' : '/api' // 接口基础路径
axios.defaults.timeout = 20000 // 超时时间 20s
// axios.defaults.withCredentials = true // 允许设置cookie(开启的话需后端配置)
// http请求拦截器
axios.interceptors.request.use(config => {
if (config.isLoading !== false) { // 如果配置了isLoading: false,则不显示loading
showFullScreenLoading()
}
config.headers['Content-Type'] = 'application/json;charset=UTF-8'
return config
}, error => {
hideFullScreenLoading()
return Promise.reject(error.response)
})
// http响应拦截器
axios.interceptors.response.use(data => {
hideFullScreenLoading() // 响应成功关闭loading
return data
}, error => {
hideFullScreenLoading()
let _status = error.response && error.response.status
if (_status === 504 || _status === 404) {
// 跳转404页面(目前没有,只能先跳转首页)
//router.push({ path: '/' })
}
return Promise.reject(error)
})
Vue.prototype.$http = axios

  ok,上面的代码就实现了全屏的loading动画。
注意:loading的样式是可以自定义的,文案也是可以自定义的。

vue+elementUI+axios实现的全局loading加载动画的更多相关文章

  1. 使用Dialog实现全局Loading加载框

    Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...

  2. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  3. HTML5 五彩圆环Loading加载动画实现教程

    原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...

  4. QT自定义控件系列(二) --- Loading加载动画控件

    本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...

  5. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  6. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

  7. 原生JS+ CSS3创建loading加载动画;

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  8. CSS动画实例:Loading加载动画效果(一)

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

  9. CSS动画实例:Loading加载动画效果(三)

    3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

随机推荐

  1. informix存储过程笔记

    一.存储过程概述 存储过程是一个用户定义的函数,由存储过程语句(SPL) 和一组SQL语句组成,以可以执行代码形式存储在数据库中,和表.视图.索引等一样,是数据库的一种对象. 存储过程语言SPL(St ...

  2. Salesforce的对象关系

    对象关系 Salesforce中的对象关系和一般的关系数据库不同. 在关系数据库中对象间的关系是由主键.外键等加以定义.而在Salesforce中,对象之间的关系是由自定义字段来确定. 这么做的原因是 ...

  3. 安卓投屏助手(B1358)之辅助调试

    Android远程桌面助手的中文版——安卓投屏助手正式上线.安卓投屏和远程控制的软件其实已经非常多了,如Vysor.Total Control.Mobizen.ApowerMirror.TeamVie ...

  4. SQL 获取时间段内日期列表

    declare @start date,@end date; set @start='2010-01-01'; set @end='2010-02-01'; --获取时间段内日期列表 select [ ...

  5. python-重载

    重载概念 重载是对继承的父类方法进行重新定义.重载可以重新定义方法还可以重新定义运算符.因为通过继承的类不一定能满足当前类的需求.在当前类中只需要修改部分内容而达到自己的需求. 重载特点 减少代码量和 ...

  6. 利用Navicat高效率postgresql转mysql数据库

    本人很喜欢postgresql数据库,也一直认为postgresql比mysql要更好更强大. 可生态环境太差了,无奈,最近要把一个小站转成mysql数据库. 小站主要表数据110万,pg_dump备 ...

  7. C语言实现将日期、时间保存到文本文件中

    今天突然兴起,看来一下C语言的文件操作,以前在学习的时候,总是一带而过,觉得没有什么用处:但是现在看来,还真的没有什么用处,最后,我现在还有用到,当然这只是我的个人认为,并不能说明什么,在此我将自己写 ...

  8. centos7 安装 pyspider 出现的一系列问题及解决方案集合

    先安装python3 和 pip3 wget https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 安装zlib-devel包(后面安装pi ...

  9. 012_python在shell下单行执行多行代码

    一.有时候只是简单的获取下时间戳,不想在python解释器的交互模式下再去执行python代码,如何实现呢? 以循环输出多行为例: (1)第一种方式: python -c "exec(\&q ...

  10. 对多条件进行组合,生成笛卡尔积的用例集合的python代码实现

    做专项测试需要对一些因素进行组合的测试,这里组合起来后数据量可能很大,我们可以用python来代劳 代码有优化空间,目前先用着. ************************代码开始******* ...