Avc-hooks NPM | npm.io

avc-hooks

介绍

安装

npm install avc-hooks
# 或者
yarn add avc-hooks
# 或者
pnpm add avc-hooks

CacheRequest

CacheRequest 缓存axios请求结果，减少重复请求，提高请求效率。

import axios from 'axios' 
import { CacheRequest } from 'avc-hooks'
// 初始化缓存axios实例，设置可选参数 
const cacheAxios = CacheRequest(axios, { 
    updateKey: "updateKey", // 在请求中添加updateKey参数，当updateKey为true时，请求不会使用缓存，而是重新请求，默认：false 
    cacheStore: "cacheStore", // 存储库名，默认：avc-cache 
})
// 计时开始 console.time('请求')
// 发起GET请求，示例中设置updateKey为true以忽略缓存并更新 
cacheAxios.get('http://127.0.0.1:8080/app', { 
    params: { 
        name: 'avc', 
        updateKey: true, // 此处的updateKey 为注册时的updateKey，为true时，请求不会使用缓存，而是重新请求，并更新缓存。false或者不传时，请求会使用缓存 
    }, 
}).then(res => { 
    console.timeEnd('请求') 
    console.log("结果", res) 
})

特性

自动缓存axios请求结果
请求参数中通过updateKey控制是否使用缓存或更新缓存
可自定义存储库名称

注意事项

此包仅适用于基本的数据类型，复杂类型如函数、日期等可能无法正确缓存
缓存依赖浏览器的caches API，可能在某些环境中不可用

useFormModal

useFormModal 是一个自定义的 React Hook，用于管理表单弹窗的显示、数据加载、提交等逻辑。

Props

属性名	类型	必填	默认值	说明
title	React.ReactNode	是	-	弹窗标题
content	React.ReactNode \| ((form: FormInstance) => React.ReactNode)	是	-	表单内容，可以是 ReactNode 或一个函数，接收 `form` 作为参数返回 ReactNode
mounted	(data: any, form: FormInstance) => void	否	-	页面加载完成时的回调函数，接收两个参数 `data` 和 `form`，其中 `data` 为初始数据，`form` 为表单实例
unmount	() => void	否	-	弹窗卸载之前执行的回调函数
onOk	(values: FormValues) => Promise<{ status: boolean, message?: string }>	是	-	点击确认按钮后的回调函数，接收表单收集的数据作为参数，返回一个 Promise，包含一个对象，其中 `status` 表示操作是否成功，`message` 表示操作结果的消息
formArgs	Antd.FormProps	否	{}	表单的额外参数配置，详情见 Antd Form 组件

返回值

属性名	类型	说明
setOpen	(open: boolean \| Record<string, any>) => void	控制弹窗显示或隐藏的函数
form	FormInstance	表单实例
getValues	() => FormValues	获取表单收集的数据

示例

//App:
import React, { useEffect } from 'react'
import { CacheRequest } from 'avc-hooks'
import useModal from './useModal'
const App = () => {

    const {
        createModal,
        updateModal
    } = useModal();

    return <>
        <Button
            onClick={() => {
                createModal.setOpen(true)
            }}
        >新增</Button>
        <Button
            onClick={() => {
                updateModal.setOpen({
                    id: 1,
                    name: '张三',
                    age: 20
                })
            }}
        >编辑</Button>
    </>
}

export default App

// useModal.tsx
import React, { useEffect, useState } from 'react'
import {useFormModal} from "avc-hooks"
import { Form, Input, InputNumber, Select } from 'antd'
import { cacheAxios } from './App'
import type { UseFormModalReturnType } from 'avc-hooks'
interface FormValues {
    id?: number;
    name: string;
    age: number;
}
interface Option {
    value: string | number;
    label: string;
}
type ModalReturnTypeDictionary = {
    [key: string]: UseFormModalReturnType;
};
function UseModal(): ModalReturnTypeDictionary {
    const [options, setOptions] = useState<Option[]|[]>([])
    useEffect(() => {
        setTimeout(()=>{
            setOptions([
                {label:"唱",value:"唱"},
                {label:"跳",value:"跳"},
                {label:"rap",value:"rap"},
                {label:"篮球",value:"篮球"}
            ])
        },5000)
    }, [])
    const content = <>
        <Form.Item
            label={"姓名"}
            name={"name"}
        >
            <Input placeholder={"请输入姓名"} />
        </Form.Item>
        <Form.Item
            label={"年龄"}
            name={"age"}
        >
            <InputNumber placeholder={"请输入年龄"} />
        </Form.Item>
        <Form.Item
            label={"测试下拉框"}
            name={"test"}
        >
            <Select options={options} />
        </Form.Item>
    </>
    const createModal = useFormModal({
        title: '创建弹窗',
        content,
        onOk(values: FormValues){
            return cacheAxios.post('http://127.0.0.1:8080/data', values).then(() => {
                return {
                    status: true,
                    message: "创建成功"
                }
            })
        }
    },[options])
    const updateModal = useFormModal({
        title: '编辑弹窗',
        content,
        onOk(values: FormValues) {
            return cacheAxios.post('http://127.0.0.1:8080/data', values).then(()=>{
                return {
                    status: true,
                    message: "编辑成功"
                };
            })
        },
    },[options])
    return {
        createModal,
        updateModal
    }
}

export default UseModal

贡献与反馈

欢迎提出问题、建议或贡献代码。如果你遇到任何问题，可以创建一个新Issue。

许可

MIT License

antd dayjs fetch-api lodash react-dom react-router-dom

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago