触发事件，按钮loading状态，封装hooks

背景：

正常请求接口中，当接口触发，需要声明loading值，作为监听正在请求或请求完成的状态，此hooks方便了这一写法

//uselock.ts

import { ref } from 'vue';

export function useLockFn<T>(fn: (...args: any[]) => Promise<T>) {
  const isLock = ref(false);
  const lockFn = async (...args: any[]): Promise<T | undefined> => {
    if (isLock.value) return;
    isLock.value = true;
    try {
      const res = await fn(...args);
      isLock.value = false;
      return res;
    } catch (error) {
      isLock.value = false;
      throw error;
    }
  };
  return {
    isLock,
    lockFn,
  };
}

如何使用：

isLock是监听开始请求接口为true，请求结束的loading状态为false，

调用事件loginLock触发事件

<script lang="ts" setup>
import {useLockFn} from './useLockFn.ts'
const { lockFn: loginLock, isLock } = useLockFn(async () => {
  if (phoneStatusType.value !== 'login') {
    ElMessage.warning('该账号未注册，请前往注册!');
    return;
  }
  await formRef.value?.validate();
  await props.submitValid?.();
  await getPhoneStatus();
  // 登录
  const data = Object.assign(formData, {
    username: formData.phonenumber,
    type: phoneStatusType.value,
    loginStatus: false,
  });
  await (formData.scene === LoginWayEnum.CODE
    ? authStore.mobileLogin(data)
    : authStore.adminLogin(data));
  ElMessage.success('登录成功');
});
</script>

<template>
  <el-button :loading="isLock" @click="loginLock">
    触发方法
  </el-button>
</template>