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加载示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504718.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android ui自动化框架选型,Appium UI 自动化框架之我见 (开源)

APP UI Automation Framework一个基于 Appium 1.8.1、TestNG&#xff0c;Page Object 模式开发的 UI 自动化测试框架介绍文档结构图基本功能每秒生成一次截图通过 xml 配置待执行的测试用例通过 yml 指定待执行测试的设备及 Appium 端口用例执行失败自动重试&#xff0c;且重试…

长虹android电视安装apk,长虹电视通过安卓手机安装沙发管家教程

‍本文教程适用于长虹电视LED39(48/50/55)C 2080i等相类似型号&#xff1b;【安装步骤简介】安卓手机安装沙发管家手机版--手机和智能电视/盒子用同一个路由器连接--沙发管家手机版推送安装【操作方法详情】1、使用您的安卓手机下载并安装沙发管家手机版&#xff1a;http://pub…

1使用技巧_新版PubMed使用技巧1

以下分享适合小白&#xff0c;高手请绕路。PubMed是许多医学生以及科研人员必备的检索系统&#xff0c;高效的利用PubMed可以节省很多时间。本文从以下几个方面简单讲解新版PubMed的使用技巧1&#xff1a;1、PubMed基本介绍&#xff1b;2、PubMed的高级检索。后期分享使用技巧2…

android 调用系统下载apk,如何在自己的App中调用Android系统自带的安装/卸载程序...

AppUtils里面写了如何安装和卸载apk(这段代码出自这里&#xff1a;点击打开链接~)&#xff0c;这里的安装和卸载调用的是Android本身的一个安装卸载&#xff0c;所以可能页面不会太优雅&#xff0c;并不符合商业App的期望&#xff0c;如果要做到更优雅的实现&#xff0c;就要用…

switch matlab c语言,matlab switch语句使用

switch 块有条件地执行一组语句从几个选择。每个选项所涵盖的一个 case 语句。计算 switch_expression 是一个标量或字符串。计算case_expression是标量&#xff0c;标量或字符串的字符串或单元阵列。switch 块测试每个 case &#xff0c;直到其中一个 case 是 true 。case 是 …

HTML列表内容自动排序,JS实现HTML表格排序功能

本文实例为大家分享了JavaScript实现HTML表格排序功能&#xff0c;供大家参考&#xff0c;具体内容如下HTML代码&#xff1a;click meclick meclick meclick me15.437001.220阿7.0543,000炳30.62302,558,800和22.3056瞎26.310.65-63.1674子JavaScirpt代码&#xff1a;var table…

html复选框打钩行变颜色,Excel 单元格打勾会变颜色,开发工具的复选框这样玩...

Excel中的复选框除了打钩&#xff0c;打叉之外还有什么其他功能吗&#xff1f;其实&#xff0c;这里面的学问可多了&#xff0c;可造之物也非常之多。今天&#xff0c;我就利用复选框来教大家制作一个特别的表格&#xff0c;在复选框中打钩的后&#xff0c;单元格的颜色就会随着…

js怎么图表在html中显示不出来的,基于Echarts图表在div动态切换时不显示的解决方式...

简单粗暴&#xff0c;先上图&#xff0c;大概长这样&#xff1a;在使用vue时有遇到像上图下拉框change事件切换div&#xff0c;change切完后大概会变成这个样子&#xff1a;上代码&#xff1a;{{ option.text }}{{selected}}export default{name:"test",data(){retur…

【UML】第13篇 序列图(2/2)——建模的方法

目录 三、序列图建模 3.1 概述 3.2 建模的步骤 3.3 举例说明步骤 1.确定主要场景和流程 2.确定参与的对象 3.绘制序列图 4.注意事项 3.4 特殊的情况 序列图是我个人认为&#xff0c;UML中最重要的图之一。 而且序列图&#xff0c;对于业务建模&#xff0c;也有非常好…

如何创建计算机的桌面快捷方式,怎么设置桌面快捷方式,怎么创建快捷方式到桌面...

很多win7系统用户反映说遇到这样一个问题&#xff0c;就是电脑上从文件服务器创建的快捷方式就会自动被删除&#xff0c;自己重新创建之后&#xff0c;过几天重新启动win7系统的时候&#xff0c;那些快捷方式又会自动被删除不见了&#xff0c;怎么办呢&#xff0c;下面以win7 3…

哥大计算机专业 世界排名,哥伦比亚大学计算机科学硕士排名第16(2020年TFE Times排名)...

哥伦比亚大学实力介绍哥伦比亚大学除去常青藤的榜首地位&#xff0c;研究生的金融工程 更是被人们称为是金工届的magic seven 并且商学院以及MBA项目是很多人垂涎已久的。更有远近闻名的国际公共关系事物学院&#xff0c;以及新闻专业。2020年TFE Times美国计算机科学硕士排名参…

福师计算机应用基础在线作业二及答,福师《计算机应用基础》在线作业二 下列软件中属于应用软件的是.docx...

福师《计算机应用基础》在线作业二 下列软件中属于应用软件的是.docx 计算机应用基础计算机应用基础1 1 单选题单选题1 下列软件中属于应用软件的是() D A 操作系统B 编译程序C 数据库管理系统D 财务管理系统2 以下域名中&#xff0c;表示商业网的是() C A eduB cnC comD org3 …

台式计算机没有usb3.0,新装的win7没有usb驱动完美解决方法(支持usb3.0/usb3.1)

最近有很多网友问&#xff0c;为什么我新装win7系统后usb驱动&#xff0c;相关的usb鼠标键盘都不能用了怎么办&#xff1f;大家都知道&#xff0c;win10系统虽然发布了几年&#xff0c;但是由于Win7的习惯留住了不少Win7忠实用户&#xff0c;因此Win7系统的使用用户还是比较多的…

为此计算机上的所有用户安装此加载项,activex 安装给所有计算机用户

我通过以下inf文件 创建了一个cab文件[version]signature"$CHICAGO$"AdvancedINF2.0[Add.Code]Test.dllTest.dll[Deployment]InstallScopemachine[Test.dll]file-win32-x86thiscabclsid{49C4436D-AA73-4324-807D-50C0D5B8AF5D}FileVersion1,0,0,0RegisterServeryesRe…

typora用Pandoc导出html,Typora安装 Pandoc实现导出功能

Typora安装 Pandoc实现导出功能问题引入在使用Typora的时候&#xff0c;如果想要把写好的MarkDown文件导出到其他地方的话&#xff0c;是比较方便的。但是Typora本身只支持PDF和HTML两种方式的导出&#xff0c;如下图所示&#xff0c;如果想导出下面的方式他就会提示安装Pandoc…

微型计算机惠普1hm20av,微型计算机原理及应用(答案).doc

微型计算机原理及应用(第3版)(修订本)答案习 题 1一、选择题1.A2.C3.B4.B5.A6.A7.B8.C9.C10.C11.C12.A13.D14.A15.D16.C在GB2312-80国家标准中&#xff0c;16~55区为一级汉字、56~87区为二级汉字。DBB5H&#xff0d;A0A0H 3B15H3BH 59DBB5H属于二级汉字。二、完成下列不同进制…

游戏教案 电子计算机,计算机模板电子教案.doc

教案,小学教案,全册教案,教案设计,教学设计,教案全集,全册教学设计,全本教案PAGEPAGE \* MERGEFORMAT 30六年级信息技术教学设计立岗小学电子教案模板教学内容1、网上论坛BBS课时1课时教学目标1、认识一个网上论坛BBS的界面&#xff0c;学习尝试在其中注册并浏览&#xff0c;发…

联想笔记本关闭锁定计算机,联想笔记本Win10怎样显示/隐藏大小写锁定及数字锁定图标...

近来&#xff0c;很多联想Win10笔记本用户都在抱怨自己的电脑桌面总会显示大小写锁定和数字小键盘锁定图标&#xff0c;看着很不习惯。那么&#xff0c;我们要怎样设置图标隐藏呢&#xff1f;下面&#xff0c;小编就向大家分享联想笔记本Win10设置显示/隐藏大小写锁定及数字锁定…

气象科学与计算机应用论文,面向气象数据的智能分析方法分析-计算机应用技术专业毕业论文.docx...

摘要摘要降水预测问题是一个非常复杂、重要的研究课题。一种事物从过去发展到现在再发展到未来&#xff0c;其发展总存在某些内在的规律&#xff0c;国内外的一些专家和学者们积极的进行探索&#xff0c; 掌握事物发展的固有规律&#xff0c;把预测问题置于科学的基础之上&…

mysql for update_mysql SELECT FOR UPDATE语句使用示例

以MySQL 的InnoDB 为例&#xff0c;预设的Tansaction isolation level 为REPEATABLE READ&#xff0c;在SELECT 的读取锁定主要分为两种方式:SELECT ... LOCK IN SHARE MODE SELECT ... FOR UPDATE这两种方式在事务(Transaction) 进行当中SELECT 到同一个数据表时&#xff0c;都…