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

背景:

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

TypeScript 复制代码
//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触发事件

html 复制代码
<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>
相关推荐
Kyle199426 分钟前
RollCode:高效低代码开发新体验
前端
这是个栗子27 分钟前
【Node.js安装注意事项】-安装路径不能有空格
前端·npm·node.js
源力祁老师29 分钟前
外部系统获取Odoo数据最便捷的方式
开发语言·前端·javascript
用户97141718142731 分钟前
picker-view选中框不居中
前端
YGY_Webgis糕手之路31 分钟前
Cesium 快速入门(十) JulianDate(儒略日期)详解
前端·gis·cesium
燕山石头1 小时前
解决 IntelliJ IDEA Build时 Lombok 不生效问题
java·前端·intellij-idea
chancygcx_1 小时前
前端核心技术Node.js(二)——path模块、HTTP与模块化
前端·http·node.js
YGY_Webgis糕手之路1 小时前
Cesium 快速入门(三)Viewer:三维场景的“外壳”
前端·gis·cesium
丘色果2 小时前
NPM打包时,报reason: getaddrinfo ENOTFOUND registry.nlark.com
前端·npm·node.js