VUE2:Element-UI中的loading加载的使用，以及如何在请求开始加载，在请求结束关闭

我们在很多请求的场景，尤其是那种大量数据渲染的页面下，都需要用到一个加载动画来过度这段时间，否则就会很突兀的展示给用户突然出现的数据，先来看一个例子：

        可以看到点击跳转后有一个明显的加载动画，这样的设计在新增、删除等操作后，重新返回结果时用于给用户展示相关的过度动画，这是一个很好过度解决方案。那么下面我们来看看代码。

首先来看看思路，
        当我们开始向后台查询时， 我们开启一个大罩子，要覆盖住整个body，然后罩子是半透明的黑色，显示一个加载文字，当查询完毕之后，关掉这个罩子。
依托以上的规则，我们来看看Element-UI文档怎么说的：

        Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上。

 通过文档我们可以了解到，Loading方法有两种，一种是指令，一种是服务
        指令方法很好理解，通过v-loading，只需要绑定Boolean类型的变量，true就是开，false就是关，在调用查询之前开开，查询结束之后关上，但是这种方法能做到的不多，我们继续看看服务类型的方法。

来看看代码：

starLoading() {
    // 创建一个 loading 实例并赋值给 loading 变量
    let loading = this.$loading({
        text: "加载中", // 设置 loading 文本为 "加载中"
        spinner: "el-icon-loading", // 使用 Element UI 提供的加载图标
        background: "rgba(0, 0, 0, 0.7)", // 设置 loading 遮罩层背景色为半透明黑色
        target: document.querySelector("body"), // 将 loading 遮罩层挂载到页面 body 元素上
    });
    // 返回一个包含关闭 loading 遮罩层方法的对象
    return {
        // 方法用于关闭 loading 遮罩层
        closeLoading: () => {
            loading.close(); // 调用 loading 实例的 close 方法关闭遮罩层
        }
    };
}

解析一下：

let loading = this.$loading({ ... }):
        在函数内部，它创建了一个 loading 实例，并将其赋值给 loading 变量。这个 loading 实例是通过调用 $loading 方法创建的，$loading 方法 是 Element UI 框架提供的一个功能，用于显示加载中的动画。
return { ... }:
        函数返回一个对象，该对象包含了一个方法 closeLoading 用于关闭 loading 遮罩层。
closeLoading: () => { loading.close(); }:
        这个 closeLoading 方法是一个箭头函数，它调用了 loading 实例的 close() 方法，用于关闭遮罩层。

        所以总结一下就是，当我们需要开启一个罩子的适合，我们将starLoading()这个函数赋值给一个变量，vue2是弱类型的，所以我们随意let一个对象就能赋值，然后当我们需要关闭的适合，用这个对象来调用closeLoading这个方法即可。

来看代码：

getCategory() {
	this.loadingInstance  = this.starLoading(); //调用
	this.$axios.get('admin/category/getCategory', {
		params: this.param
	}).then(res => {
		if (res.data.code === 1) {
			this.tableData = res.data.data.list
			this.total = res.data.data.total
			this.param.pageNum = res.data.data.pageNum
			this.param.pageSize = res.data.data.pageSize
			// 必须在 $nextTick 中关闭 Loading
			this.$nextTick(() => {
			// 在 nextTick 之后关闭 loading
				this.loadingInstance.closeLoading();
			});
		}else{
			this.$nextTick(() => {
			// 在 nextTick 之后关闭 loading
				this.loadingInstance.closeLoading();
			});
		}
	})
},

    this.starLoading() 调用了前文定义的 starLoading() 函数，该函数创建了一个 loading 实例并返回了一个包含关闭 loading 的方法的对象。通过这个调用，我们获取了创建的 loading 实例，并将其赋值给 this.loadingInstance 变量。然后this.loadingInstance调用closeLoading()就可以关闭loading实例。

切记：一定一定要在 nextTick 之后关闭 loading（官方文档说的我也不知道为啥）

   还有就是可以看到我的代码中，请求返回的成功的和不成功的我都写了一个关闭，那有的人就该问了：“为什么不写在请求完毕之后呢？”，其实我也是这么想的，一开始我写在请求成功里面，好使，写在外面就不好使了，所以我就在成功和不成功的方法里面都写了关闭来确保用户使用没问题。

这样一个简单应用的Loading就完成了，觉得有用的话就点个赞支持一下吧！！