ElementUI全局loading妙招，防止请求连续重复提交

见解分享

2023-10-22 00:35:51

前言

在开发项目时，我们经常会遇到需要请求数据的场景。为了避免请求数据时页面出现空白的情况，通常会使用loading加载效果来进行过渡。

ElementUI是一个非常受欢迎的前端框架，它提供了loading组件，可以很容易地实现loading效果。但是，ElementUI的loading组件有一个缺点，就是它只能针对单个请求进行控制。

如果在一个页面中有多个请求，那么就需要为每个请求都创建一个loading组件。这不仅会增加代码量，还会降低代码的可读性。

为了解决这个问题，我们可以对ElementUI的loading组件进行封装，从而实现全局loading的效果。这样，无论页面中有多少个请求，我们只需要创建一个loading组件即可。

封装ElementUI的loading组件

要封装ElementUI的loading组件，我们需要创建一个新的组件，该组件继承自ElementUI的loading组件。

import { Loading } from 'element-ui';

export default {
  extends: Loading,

  data() {
    return {
      count: 0
    }
  },

  methods: {
    open() {
      this.count++;
      this.visible = true;
    },

    close() {
      this.count--;
      if (this.count === 0) {
        this.visible = false;
      }
    }
  }
};

在这个组件中，我们添加了一个新的data属性count，该属性用来记录当前正在进行的请求数量。

我们还修改了open和close方法，当调用open方法时，我们将count加1，并显示loading组件。当调用close方法时，我们将count减1，如果count为0，则隐藏loading组件。

使用封装后的loading组件

要使用封装后的loading组件，我们需要在需要请求数据的组件中引入该组件，并在mounted钩子函数中初始化loading组件。

import GlobalLoading from '@/components/GlobalLoading';

export default {
  components: {
    GlobalLoading
  },

  mounted() {
    this.globalLoading = new GlobalLoading();
    this.globalLoading.$mount();
    document.body.appendChild(this.globalLoading.$el);
  },

  methods: {
    loadData() {
      this.globalLoading.open();
      // 请求数据
      this.globalLoading.close();
    }
  }
};