element-ui中使用loading

素颜马尾好姑娘i 2024-04-18 16:15 26阅读 0赞

当我们通过接口调取数据时，有那么一两秒的时间，是在动态的加载数据，有可能会出现一个 暂无数据 的尴尬场景，这个时候，我们可以用到loading了。我们可以以下面这种优雅的方式去使用它。

先写一个 loading.js 文件：

import { Loading } from 'element-ui';
    
    let loadingCount = 0;
    let loading;
    
    const startLoading = () => {
      loading = Loading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    };
    
    const endLoading = () => {
      loading.close();
    };
    
    export const showLoading = () => {
      if (loadingCount === 0) {
        startLoading();
      }
      loadingCount += 1;
    };
    
    export const hideLoading = () => {
      if (loadingCount <= 0) {
        return;
      }
      loadingCount -= 1;
      if (loadingCount === 0) {
        endLoading();
      }
    };

再在 axios 的 interceptor 中调用：

/ ...
    import { showLoading, hideLoading } from './loading';
    
    /* 请求拦截器（请求之前的操作） */
    ajax.interceptors.request.use((req) => {
      showLoading();
      return req;
    }, err => Promise.reject(err));
    
    /* 请求之后的操作 */
    ajax.interceptors.response.use((res) => {
      hideLoading();
    
      return res;
    
      return Promise.reject(res);
    }, (err) => {
      hideLoading();
      return Promise.reject(err);
    });

发表评论取消回复

表情：

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

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

相关阅读

相关 element-ui中使用loading

我们通过接口调取数据时，有那么一两秒的时间，是在动态的加载数据，有可能会出现一个暂无数据的尴尬场景，这个时候，我们可以用到loading了。我们可以以下面这种优雅的方...

素颜马尾好姑娘i/ 2024年04月18日 16:15/ 0 赞/ 27 阅读

相关 ElementUI--使用（实例）

原文网址：[ElementUI--使用（实例）\_IT利刃出鞘的博客-CSDN博客][ElementUI--_IT_-CSDN] 其他网址 [44、前端基础-Vue-整

Love The Way You Lie/ 2023年01月23日 14:58/ 0 赞/ 156 阅读

相关页面中使用elementui的面包屑

使用场景：点击资源列表中的某一行，可以跳转到该行详情，涉及层级关系，考虑用面包屑导航，为了防止面包屑导航在页面刷新时不存在，考虑监听路由参数的变化 ![在这里插入图片描述]

叁歲伎倆/ 2023年01月15日 02:24/ 0 赞/ 115 阅读

相关 axios封装中使用loading

先安装 npm install axios npm i element-ui -S 在main.js中引入 // vant按需引入 //i

旧城等待，/ 2023年01月07日 04:56/ 0 赞/ 289 阅读

相关 jQuery中load的使用

$(elements).load(fn)这个功能是elements元素完全加载后触发fn方法, 如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和

矫情吗；*/ 2022年05月25日 03:40/ 0 赞/ 138 阅读

相关 elementUI的使用

文章目录安装安装官网：[https://element.eleme.cn/\/zh-CN][https_element.eleme.cn_zh-

我会带着你远行/ 2021年11月27日 03:04/ 0 赞/ 367 阅读

相关 antd-pro中控制loading的dva-loading使用(React)

前言：我们原来写loading状态的方法是，在异步请求的开始的时候开启loading，在异步请求的结束关闭loading，这样的写法是比较麻烦的，因为这个操作都是一

Dear 丶/ 2021年11月10日 16:06/ 0 赞/ 1276 阅读

相关 elementUI在vue中的使用步骤

1、安装 `npm i element-ui -s` 2、安装成功后，在项目中的main.js中引用elementUI mport ElementUI fro

浅浅的花香味﹌/ 2021年11月05日 02:52/ 0 赞/ 358 阅读

相关 elementUI使用中遇到的坑

1、通过el-upload获取到的文件file是封装后的，其中与普通input type=file 中获取到的文件是elementUI中的file.raw; 如果在读取文

柔情只为你懂/ 2021年09月17日 01:54/ 0 赞/ 765 阅读

相关 ant中的loading按钮使用

![20200805142619352.png][] ![在这里插入图片描述][20200805142626359.png] ![在这里插入图片描述][watermar

傷城~/ 2021年07月24日 23:23/ 1 赞/ 989 阅读