vue+ts 数据请求 hooks

1、后台列表数据hooks,根据ui组件库中分页器的参数定义分页参数，使用ref动态改变数据。

const usePagination = <T>(params: {
    fetchFn: (
        pageIndex: number,
        pageSize: number,
    ) => Promise<{
        data?:
            | {
                  data?: T[] | null | undefined;
                  totalCount?: number | null | undefined;
              }
            | null
            | undefined;
    }>;
    pageSizes?: number[];
}) => {
    const index = ref(0);
    const pageSize = ref(params.pageSizes?.[0] ?? 10);
    const totalItemCount = ref(1);
    const list = ref<T[]>([]) as Ref<T[]>;
    const totalPageCount = computed(() => Math.max(1, Math.ceil(totalItemCount.value / pageSize.value)));
    const currentPage = computed(() => index.value + 1);

    const fetchByPage = async (page: number) => {
        if (page < 1 || page > totalPageCount.value) {
            console.error('Invalid page number');
            return;
        }
        index.value = Math.max(0, page - 1);
        const res = await params.fetchFn(index.value, pageSize.value);
        list.value = res?.data?.data ?? [];
        totalItemCount.value = res?.data?.totalCount ?? 0;
        return list.value;
    };

    const initFetch = fetchByPage(currentPage.value);

    const refetch = (page = currentPage.value) => fetchByPage(page);

    const pagination = computed(() => {
        return {
            page: currentPage.value,
            pageSize: pageSize.value,
            showSizePicker: true,
            showQuickJumper: true,
            pageSizes: params.pageSizes ?? [10, 30],
            pageCount: totalPageCount.value,
            itemCount: totalItemCount.value,
            onUpdatePage: (pageNumber: number) => {
                fetchByPage(pageNumber);
            },
            onUpdatePageSize: (newPageSize: number) => {
                pageSize.value = newPageSize;
                fetchByPage(currentPage.value);
            },
        };
    });

    return {
        list,
        pagination,
        initFetch,
        fetchByPage,
        refetch,
    };
};

//abc是请求方法在我以前的文章中有

const { list, refetch, pagination, fetchByPage } = usePagination({
    fetchFn: (pageNo, pageSize) =>
       abc({
            body: {
                ...filters.value,
                pageParam: { pageNo, pageSize },
            },
        }),
    pageSizes: [10, 30, 100, 200],
});

2、表单提交防止多次点击进行加锁。

const axiosHandler = (() => {
    let isFetching = false;
    return async function createAndCallAxiosHandler<T>(params: {
        fetchFn: () => Promise<{
            result?: number | null | undefined;
            error_msg?: string | null | undefined;
            timestamp?: number | null | undefined;
            data?: T | null | undefined;
        }>;
        onSuccess?: (data?: T) => any;
        onError?: (error_message: string, result: number, data?: T) => any;
    }) {
        if (isFetching) {
            return;
        }
        isFetching = true;
        try {
            const res = await params.fetchFn();
            if (res.result === 1) {
                isFetching = false;
                params.onSuccess?.(res.data ?? undefined);
                return res.data ?? undefined;
            }
            isFetching = false;
            params.onError?.(res.error_msg ?? '异常错误，请重试', res.result ?? -1, res.data ?? undefined);
        } catch (err: any) {
            isFetching = false;
            params.onError?.(err.error_msg ?? '异常错误，请重试', err.result ?? -1, err.data ?? undefined);
            return undefined;
        }
    };
})();




        axiosHandler({
            fetchFn: () =>
                matrixEncourageAccountBizTypeControllerUpdateAccountBiz({
                    body: {
                      data:123
                    },
                }),
            onSuccess: () => {
                console.log('成功的回调');
            },
            onError(error_message) {
                 console.log('失败');
            },
        });

3、普通的请求

const useAxios = <T>(params: {
    fetchFn: () => Promise<{
        result?: number | null | undefined;
        error_msg?: string | null | undefined;
        timestamp?: number | null | undefined;
        data?: T | null | undefined;
    }>;
    silence?: boolean;
    skip?: boolean;
}) => {
    const data = ref<T>();
    const error = ref<string | undefined>();
    const loading = ref(true);
    const { silence = false } = params;

    const message = useMessage();

    const fetchData = async () => {
        loading.value = true;
        error.value = undefined;
        try {
            const res = await params.fetchFn();
            console.log(params, res);
            if (res.result === 1) {
                data.value = res.data ?? undefined;
            } else {
                error.value = res.error_msg ?? '异常错误，请重试';
            }
        } catch (err: any) {
            console.log(err);
            error.value = err?.error_msg ?? '异常错误，请重试';
        }
    };

    if (!params.skip) {
        fetchData();
    }

    whenever(error, (val) => {
        if (!silence) {
            message.error(val);
        }
    });

    return {
        refetch: fetchData,
        data,
        error,
        loading,
    };
};
const { data } = useAxios({
    fetchFn: () =>abc({}),
});