simple-tools 介绍

simple-tools 是一个工具集，目前有useData和useApi两个方法，用于提高代码质量下限，减少bug率，提升开发效率

安装

npm

npm i @magic_npm/simple-tools

yarn

yarn add @magic_npm/simple-tools

1. useData 方法

用于声明数据模型，重置/合并数据，规范代码块；适用场景：重置查询条件、重置表单数据等;

import { useData } from 'simple-tools'
// data 为声明的数据，merge 为合并数据的方法
const [data, merge] = useData(() => {
    name: '',
    mobile: ''
})
merge({ name: 'name_tst' })    // 等同于 data.name = 'name_tst'
merge({}, true)    // data 数据重置，回到声明数据时的状态
merge() // 重置数据，与上一致

// vue 动态数据
const [dv, mergeDV] = useData(() => reactive({
    name: '',
    mobile: ''
}))
setTimeout(() => {
    mergeDV({ name: 'name_dv' })  
}, 1000)
dv.name  // 动态数据，页面会自动更新

// 内置方法
useData.getDataType(data.name)    // 获取数据类型
// useData.mergeData(object1, object2)    // 把object2 合并到 object1 上，此方法用于一些没有使用 useData 声明数据的场景

useData 参数

参数	返回值
useData(func: () => object)	Array[object, merge:Function]

useData 返回值: merge方法

参数	返回值	说明
merge(object, boolean)	object	当第二个参数为 true 时，会重置声明数据后，再合并object

useData Methods

方法名	说明	参数
getDataType	获取数据类型	useData.getDataType(data:any): string
mergeData	合并数据，将 object2 合并到 object1 上	useData.mergeData(object1, object2): object1

2. useApi 方法

用于业务调用，包含接口调用、其它异步调用，整合代码块，提高易读性

// vue3 ts 例子 ————————
import { ref, reactive } from 'vue'
import { useData, useApi } from 'simple-tools'
const [query, mergeQuery] = useData(() => reactive({
    id: '',
    name: ''
}))
const [data, mergeData] = useData(() => reactive({
    name: '',
    mobile: ''
}))

// 场景一，普通调用
const [getData, loadingData] = useApi(() => new Promise(r => setTimeout(r, 1000)), {
    loading: ref(false),
    params: () => query,
    outputModel: (q) => ({ ...q, name: 'new_name' }),   // 修改一个参数，或者新增参数
    // 取到请求结果的data属性，也可以处理别的需求，保障返回的data就是直接可用的数据
    inputModel: (res: any) => res?.data,  
    success: (data, loadingKey, res) => {
        mergeData(data)
    }
})
getData()   // 调用
loadingData.value   // loading状态

// 场景二，阻止调用
const [getData, loadingData] = useApi(() => new Promise(r => setTimeout(r, 1000)), {
    loading: ref(false),
    params: () => query,
    before: () => {
        // to do...
        return Promise.reject() // 阻止调用，或者false也可以阻止
    },
    // 取到请求结果的data属性，也可以处理别的需求，保障返回的data就是直接可用的数据
    inputModel: (res: any) => res?.data,  
    success: (data, loadingKey, res) => {
        mergeData(data)
    }
})
getData()   // 调用
loadingData.value   // loading状态

// 场景三，一个调用多用途
const [getData, loadingData] = useApi(() => new Promise(r => setTimeout(r, 1000)), {
    loading: reactive({ data: false, load: false, refresh: false }),
    params: () => query,
    // 取到请求结果的data属性，也可以处理别的需求，保障返回的data就是直接可用的数据
    inputModel: (res: any) => res?.data,  
    success: (data, loadingKey, res) => {
        // 初次请求
        if (loadingKey === 'data') {
            mergeData(data)   
        } 
        // 下拉加载更多
        else if (loadingKey === 'load') {
            // to do
        } 
        // 刷新
        else if (loadingKey === 'refresh') {
            // to do
        }
    }
})
getData({}, 'data') // 默认加载数据
loadingData.data

getData({}, 'load') // 加载更多
loadingData.load

getData({}, 'refresh') // 刷新
loadingData.refresh

// 场景四，防止表单重复提交
const [getData, loadingData] = useApi(() => new Promise(r => setTimeout(r, 1000)), {
    isRepeat: false,    // 关闭重复调用，只有上一个调用结束后，才能发起新的调用
    loading: ref(false),
    params: () => query,
    outputModel: (q) => ({ ...q, name: 'new_name' }),   // 修改一个参数，或者新增参数
    // 取到请求结果的data属性，也可以处理别的需求，保障返回的data就是直接可用的数据
    inputModel: (res: any) => res?.data,  
    success: (data, loadingKey, res) => {
        mergeData(data)
    }
})
getData()   // 调用，上一次请求未结束前，再次调用无效
loadingData.value   // loading状态

// 场景五，单例模式调用
const [getData, loadingData] = useApi(() => new Promise(r => setTimeout(r, 1000)), {
    // 开启单例模式，第一次调用成功后(调用结果为err不算)，后续的调用都取第一次调用的结果
    isSingle: true,
    loading: ref(false),
    params: () => query,
    outputModel: (q) => ({ ...q, name: 'new_name' }),   // 修改一个参数，或者新增参数
    // 取到请求结果的data属性，也可以处理别的需求，保障返回的data就是直接可用的数据
    inputModel: (res: any) => res?.data,  
    success: (data, loadingKey, res) => {
        mergeData(data)
    }
})
getData()   // 调用，上一次请求未结束前，再次调用无效
loadingData.value   // loading状态

// 场景六，提供关闭调用得 cancel 方法（提供了此方法，isCancel参数才能生效）
const [getData, loadingData] = useApi(() => {
    let t = 0
    const pm = new Promise(r => t = setTimeout(r, 1000))
    pm['cancel'] = () => clearTimeout(t) // 关闭请求的方法
    return pm
}, {
    loading: ref(false),
    params: () => query,
    // 取到请求结果的data属性，也可以处理别的需求，保障返回的data就是直接可用的数据
    inputModel: (res: any) => res?.data,  
    success: (data, loadingKey, res) => {
        mergeData(data)
    }
})
getData()   // 调用
loadingData.value   // loading状态

useApi 参数

参数	返回值
useApi(() => Promise, options: object)	Array[apiFunc:Function, loading: object, apiObjStatus: object]

useApi options

参数	说明	类型	可选值	默认值
isCancel	自动关闭历史异步请求，用于重复调用保留最新一次调用	boolean	-	true
isRepeat	重复调用开关	boolean	-	true
isSignle	单例模式，使用第一次调用的结果	boolean	-	false
loading	调用状态，用于按钮等组件的loading效果	object	-	-
params	调用参数数据声明	() => params: object	-	-
before	返回false或Promise状态为rejeced会阻止调用	(params) => boolean | void | Promise	-	-
outputModel	输出参数调整	(params) => object | void	-	-
inputModel	获得数据后，输入数据调整	(res) => data: object	-	-
success	调用成功	(data, loadingKey, res) => void	-	-
error	调用失败	(err) => void	-	-
loadingStart	调用过程状态: 开始	(params, loadingKey) => LS | void	-	-
loadingEnd	调用过程状态: 结束	(LS) => void	-	-

useApi apiFunc

参数	返回值
apiFunc(params | void, loadingKey)	{ data: object, loadingKey: object, res: object }

useApi apiObjStatus

参数	类型	说明
status	number	调用状态: 0 待调用, 1 调用中, 2 成功, 3 失败
sendNum	number	调用次数记录
params	object	调用参数数据
output	object	调整后的输出参数数据
pm	Promise	最新一次调用
err	Error | string	调用错误
cancelApi	Function	关闭正在调用的请求，关闭方法由pm<Promise['cancel']>提供，详见demo
result	{ data, loadingKey, res }	调用结果