当前位置：首页 > article >正文

在vue3中如何优雅的管理loading状态

article 2024/11/19 20:39:10

时隔多日，我又来了。近期工作实在是太忙了，基本处于天天加班的状态，整个人都麻木了，导致最近一直没有更新什么东西，感觉都快荒废了。还好，这两天处于下个项目开发前，当前项目已提测，好歹能有一点时间来学点东西，写点东西。

好了，废话不多说，本次是给大家分享一下我这两天写的一个插件。本来是写了一个公共方法自己用来着，想着近期在网上没看到好的方法，索性做成插件，分享出来，也让各位大佬们看看还有没有改进的地方。

直接先上链接vite-plugin-auto-loading

接下来，就说说我为什么要写这个插件，以及这个插件的基本用法

一、当前已有插件的问题

其实，目前对于loading的状态管理已经有很多的处理方案了，简单列举一下

1、请求拦截

也就是在请求接口的时候进行统一封装，发出请求展示loading，请求结束关闭loading。

弊端：公共loading,没法单独配置到各个按钮以及操作上面，同时多个请求的时候不做特殊处理的话loading会闪现

2、公共方法封装

封装一个公共的方法，让后在写具体方法的时候给包一层，方法具体咋写这里就不列举了，给大家看看具体实现

// 原
const fun1 = ()=>{..........}

// 改
const fun2 = ()=>{
    loadingFun(fun1())
}
const fun1 = ()=>{..........}

这种方式的问题，不用说了吧，多了一步包裹的操作，但实际上，这种方式是最简单实现，也是最合理的，想用就用，不想用拉倒，具体传参与否就看自己怎么封装了。

3、笨办法，每个地方单独写（反正是复制粘贴）

const fun1 =async ()=>{
    	loading.value = true
    try{
    	await api() 
    }catch (e) {
    	loading.value = false
    }
}

相信这种写法的不在少数，毕竟有时候因为各种原因没工夫去封装，但又要管理loading，反正我自己用这种方式用的也不少。

4、其他方法

其他还有一些通过自定义指令啊，或者通过注入，更有甚者用vue3不建议的mixin的，这就不提了，很多时候其实大家都是迫于无奈，想改吧，牵扯太大，时间不够等等，就不说了。

二、要处理的问题

1、得能在任意的地方使用

2、尽可能少的代码，不要繁琐的步骤

3、要不改变原方法结构

4、要简单易懂

三、解决

就上述说的一样，我自己也一直在想怎么才能很好的处理loading状态，毕竟我自己很懒，能少写代码就少写代码，于是经过一段时间的问题修复，我的第一个版本成了。下面说一下具体用法，这里说一下前提，vue3+vite

1、安装

npm install vite-plugin-auto-loading -D

2、配置

// vite.config.ts
import { defineConfig } from 'vite'
import { autoLoadingPlugin } from 'vite-plugin-auto-loading'
export default defineConfig({
plugins: [
    autoLoadingPlugin()
  ]
})
// autoLoadingPlugin({debug: true // 开启调试日志}) 是否需要日志自选

3、使用

插件会自动读取loading变量中同名的方法，且同时含有async以及await，如loading.handleSearch会根据handleSearch的执行结果来改变状态，loading中没有同名，或者只有async或await,都不会做任何操作

<el-button :loading="loading.handleSearch">查询</el-button>

<list :loading="loading.getData"></list>


const loading = reactive({
    getData: false,
    handleSearch: false,
});

const getData = async() =>{
	await getApi(xxxxxxxx)
}

const handleSearch = async() =>{
	const queryData = {
		a:1,
		b:2
	}
	await postApi(queryData)
}

4、原理

通过vite插件，读取.vue文件中声明的loading变量，不论是ref还是reactive声明的都可，获取里面的key值，并匹配与key值同名的方法，当匹配到的时候，查看是否满足同时有async 以及await,符合条件的时候重写方法。如：

// 原
const handleSearch = async() =>{
	const queryData = {
		a:1,
		b:2
	}
	await postApi(queryData)
}

// 变为
const handleSearch = async() =>{
    loading.handleSearch = true
    try{
        const queryData = {
            a:1,
            b:2
        }
        await postApi(queryData)
    } finally {
       loading.handleSearch = false
    }
	
}