背景:
正常请求接口中,当接口触发,需要声明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>