axios vue 加载效果动画_Vue.js+axios+element ui 实现全局loading加载示例

超、凢脫俗 2023-01-10 03:52 181阅读 0赞

Vue.js+axios+element ui 实现全局loading加载示例

发布于 2020-2-27|

复制链接

分享一篇关于vue+axios+element ui 实现全局loading加载示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧

实现全局loading加载分析需求，我们只需要在请求发起的时候开始loading，响应结束的时候关闭loading，就这么简单 对不对？

\`\`\`javascript

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 \{

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)

\}

)

\`\`\`

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-router懒加载时添加loading效果

近期在做一个微信公众号的项目，在页面跳转时发现页面会闪一下，用户体验很不好，而且如果网慢时页面是没有数据的样式会乱很丑。于是乎，就百度看了前人的各种解决方案，个人觉得以

落日映苍穹つ/ 2023年06月06日 07:59/ 0 赞/ 4 阅读

相关 axios vue 加载效果动画_Vue.js+axios+element ui 实现全局loading加载示例

Vue.js+axios+element ui 实现全局loading加载示例发布于 2020-2-27| 复制链接分享一篇关于vue+axios+element u

超、凢脫俗/ 2023年01月10日 03:52/ 0 赞/ 182 阅读

相关 vue 全局封装loading加载(全局监听)

前言：为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装loading，请求接口成功后隐藏掉（我这是用的vant 组件根据自己情况进行改变）。第一步：

红太狼/ 2022年12月07日 15:08/ 0 赞/ 236 阅读

相关 Vue+ElementUI+Axios实现全局接口请求的加载动画

Element-UI 提供了 Loading 组件，通过对于这个组件进行一些处理，我们能做到在使用Axios发送请求的时候进行 Loading 加载动画的控制。一、定义L

朱雀/ 2022年11月12日 02:57/ 0 赞/ 264 阅读

相关 vue首次加载页面实现动画加载提示

话不多说，咱们直接上代码！！！下面图片是实现效果： > Tips：只有app第一次初始化会加载，路由到其他页面并不会加载,路由切换非常快，不需要这种全屏的加载中状态，路

布满荆棘的人生/ 2022年09月13日 06:28/ 0 赞/ 303 阅读

相关 Vue+Openlayer加载动画

> 注意：实现动画时不能有scoped！！！！通过gif ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q

红太狼/ 2022年09月08日 11:41/ 0 赞/ 250 阅读

相关 css加载中动画效果

[转载自大佬][Link 1] 效果一: ![在这里插入图片描述][88253320a6ab4a489d6b1317add231e5.png] html代码：

r囧r小猫/ 2022年09月07日 12:27/ 0 赞/ 221 阅读

相关 react-native 加载动画 loading效果

react-native loading动画（加载动画） 1. 组件代码(demo.js) 2. 调用 3. FAQ ![

朴灿烈づ我的快乐病毒、/ 2022年08月29日 15:53/ 0 赞/ 500 阅读

相关 css实现加载动画

css实现加载动画 / Usage: <div class="sk-spinner sk-spinner-rotating-plane"></div> /

不念不忘少年蓝@/ 2022年06月01日 11:54/ 0 赞/ 331 阅读

相关 vue图片加载完成前增加loading效果

这次给大家带来vue[图片][Link 1]加载完成前增加loading效果，vue图片加载完成前增加loading效果的[注意事项][Link 2]有哪些，下面就是实战案例，

小灰灰/ 2022年02月04日 14:27/ 0 赞/ 985 阅读