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