触发事件,按钮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>
相关推荐
折果32 分钟前
如何在vue项目中封装自己的全局message组件?一步教会你!
前端·面试
不死鸟.亚历山大.狼崽子36 分钟前
Syntax Error: Error: PostCSS received undefined instead of CSS string
前端·css·postcss
汪子熙36 分钟前
Vite 极速时代的构建范式
前端·javascript
跟橙姐学代码36 分钟前
一文读懂 Python 的 JSON 模块:从零到高手的进阶之路
前端·python
前端小巷子1 小时前
Vue3的渲染秘密:从同步批处理到异步微任务
前端·vue.js·面试
nightunderblackcat2 小时前
新手向:用FastAPI快速构建高性能Web服务
前端·fastapi
小码编匠2 小时前
物联网数据大屏开发效率翻倍:Vue + DataV + ECharts 的标准化模板库
前端·vue.js·echarts
欧阳天风2 小时前
分段渲染加载页面
前端·fcp
艾小码3 小时前
TypeScript在前端的实践:类型系统助力大型应用开发
前端·typescript
今禾3 小时前
前端工程化的范式革命:从 Webpack 的“全量打包”到 Vite 的“按需编译”
前端·webpack·vite