vue+axios+element ui实现全局配置loading.

最新推荐文章于 2024-08-27 08:42:07 发布

_zhiqun

最新推荐文章于 2024-08-27 08:42:07 发布

阅读量3.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_42470791/article/details/85085493

版权

本文介绍了如何结合Vue、Axios和Element UI来实现全屏全局加载效果。当发起请求时启动loading，请求结束后关闭，并且处理多个请求合并显示一次loading的问题。通过拦截请求和响应，以及利用Element UI的loading组件完成这一功能。

摘要由CSDN通过智能技术生成

背景
业务需求是这样子的，每当发请求到后端时就触发一个全屏的 loading，多个请求合并为一次 loading。
现在项目中用的是 vue 、axios、element等，所以文章主要是讲如果使用 axios 和 element 实现这个功能。

效果如下：
在这里插入图片描述

要点分析=重点
首先，请求开始的时候开始 loading，然后在请求返回后结束 loading。重点就是要拦截请求和响应。
然后，要解决多个请求合并为一次 loading。
最后，调用element 的 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()