commonLoading封装成hooks

前言

在管理系统中，像填写表格、修改状态这类操作，为了防止用户快速重复点击导致多次提交，通常需要做两个处理：

1. 设置操作缓冲（防抖）：比如用户点击提交后，系统会等2秒钟多次点击，只会真实提交一次
2. 提交按钮加加载状态：点击后按钮会变灰/显示加载图标，避免用户重复点击

这样既能让系统更稳定，也能让用户明确知道操作已被接收。

在element-plus中一般我们都是给按钮设置一个loading值，然后在点击提交去控制loading的状态，这样会在每一个页面都去设置一个loading值，故把loading封装

代码实现

import type { Ref } from "vue";
import { ref } from "vue";

type AutoLoadingResult = [Ref<boolean>, <T>(requestPromise: Promise<T>) => Promise<T>];


export function useAutoLoading(defaultLoading = false): AutoLoadingResult {
  const ld = ref(defaultLoading);

  function run<T>(requestPromise: Promise<T>): Promise<T> {
    ld.value = true;
    return requestPromise.finally(() => {
      ld.value = false;
    });
  }

  return [ld, run];
}

如何调用

/*
在给run方法传入一个promise，会在promise执行前或执行后将loading状态设为true，在执行完成后设为false 

    事例：
*/
    import { useAutoLoading } from "@/hooks/commonLoading";
    const [commonLoading, fetch] = useAutoLoading();
    
    // 给按钮绑定loading  
    <el-button :loading="commonLoading">测试按钮</el-button>    

    // 调用接口
    fetch(baseService.get('url').then(res => {}))