axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局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加载示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例相关推荐
- axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
- elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
- axios vue 加载效果动画_在vue中通过axios异步使用echarts
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中 ...
- PhP加载时显示动画,在ajax请求完之前的loading加载的动画效果实现
这篇文章给大家介绍的内容是关于在ajax请求完之前的loading加载的动画效果实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多时候我们需要引入框架来开发项目,这时我们可能会 ...
- vue接口总是请求超时_vue axios请求超时的正确处理方法
自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历. 具体原因 最近公司在做一个项目, ...
- html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
- Glide加载gif动画只播放一次的方法 Glide加载gif动画先显示最后一帧再开始播放动画导致闪屏的解决方案
场景: Android App利用ViewPager制作引导页,然后利用Glide加载gif动画. 问题: 1.Glide加载gif动画如何只播放一次? 2.Glide加载gif动画,在viewPag ...
- element使用自定义的loading加载效果
在使用loading加载的过程中,elementui提供了两种样式,但是针对不同的项目,也是有着不同的需求,需要不同的或者特制的loading加载效果. 解决思路如下: 结合elementui本身的标 ...
- element ui table组件 异步加载数据盒子位移
使用element ui 中的 table组件时 ,异步加载数据,然后渲染上去时会出现td与th对不齐,但是重新重新进一次就有又好了,但是对于用户体验肯定是不行的. 这个时候只需要使用element ...
最新文章
- Consul入门03 - 注册服务
- python 内置函数 eval()函数 (用来执行一个字符串表达式,并返回表达式的值)
- 第三期CSIG图像图形学科前沿讲习班-详细日程
- 无人机飞控开发平台培训理论课程——飞行原理
- 应用机器学习进行无人机航拍影像质量评估
- C++ 继承关系图 01
- Mac安装nginx配置过程
- 朴素贝叶斯算法-分类算法
- python小工具自动审单录凭证_跟着老板工作了二十年,最近来了个新员工然后我被开除了...
- 修改阿里云ECS服务器的系统时区
- 深入解读Docker底层技术cgroup系列(2)——cgroup的初始化
- $.each 中return问题
- document.documentElement.clientHeight 与 document.body.clientHeight
- David Lowe 的sift代码
- 透气清爽的高回弹跑鞋,跑步轻松畅快,咕咚逐日21K体验
- JavaScript使用手册
- R语言基于方差分析ANOVA检验模型拟合度(Fit Test)实战:检验同一数据集简单模型和复杂模型的拟合度差异
- 关于除去WordPress页脚底部的自带标语
- Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
- JDBC插入数据后返回新数据id
热门文章
- javaee实验报告心得_JavaEE实验报告.doc
- 成人高考 计算机英语作文,2017年成人高考英语作文范文
- 销售管理系统 java_用Java从零写一个B2C商城,看完不要再说自己没有实战经验了!...
- MATLAB imshow之后在四周加上边框
- python matplotlib画图是设置线宽
- Halcon学习笔记:读取多张图片
- leetcode BFS(python+c++)
- 小甲鱼 OllyDbg 教程系列 (五) : 破解 PC Surgeon 之 查找字符串
- C++ 使用 TinyXml 解析 XML 文件
- linux 和服务通讯,Android 的Activity和Service之间的通信