cyl-hooks-api

React.JS api工具 Hooks

这是一套基于react上下文的api管理方法,内置许多功能性的hooks

下载

npm install --save cyl-hooks-api

Or:

yarn add cyl-hooks-api

Or:

pnpm add cyl-hooks-api

前置操作

ApiProvider

ApiProvider 组件必须在所有组件的入口出使用，这样才能保证页面种的各种hooks使用正常,如果还是不懂，那就请学习一下 react Context 的使用

案例

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {ApiProvider} from "cyl-hooks-api"
/**
 * @tip 可以不是axios，随便一个对象就可以，只要是实现了 get post delete put 这几个方法就可以
 */
import axios from "axios"

ReactDOM.render(
    <React.StrictMode>
        <ApiProvider httpClient={axios}>
            <App />
        </ApiProvider>
    </React.StrictMode>,
    document.getElementById('root')
)

Hooks

useApi

这个hooks用户获取上下文

T  入口出 ApiProvider 这个组件传入的 `httpClient` 类型  

案例

import {useApi} from "cyl-hooks-api"
export default function Component(){
    const api = useApi()
    return <div>我是组件</div>
}

useApiState

这个hooks用于请求接口并获取接口返回结果以及请求过程的状态，以及请求的错误

案例

`test.ts`
import {ContextInstance,Context} from "cyl-hooks-api"
export interface Test {
    id:number
}
export function getTest(ctx:Context<ContextInstance,any>,id:number):Promise<Test>{
    return ctx.get("/test",{
        param:{
            id
        }
    })
}

import {useApi,useApiState} from "cyl-hooks-api"
import {getTest} from "./test.ts"

export default function Component(){
    const api = useApi()
    const [id,setId] = useState(0)
    const [test,loading,error] = useApiState(api,getTest,id)
    return <div>
        <div>状态:{loading ? "请求中" : "请求完成"}</div>
        <div>错误:{error ? error?.message : "没有错误"}</div>
        <div>结果:{JSON.stringify(test)}</div>
    </div>
}

useApiAnyError

切记是一个组件里面的 这个hooks用户一个组件的所有错误，意思就是一个组件所有的请求只要出错误这个hooks都会捕获到。

案例

import {useApi,useApiState,useApiAnyError} from "cyl-hooks-api"
import {getTest} from "./test.ts"
import {getapp} from "./app.ts"

export default function Component(){
    const api = useApi()
    const [id,setId] = useState(0)
    const [test] = useApiState(api,getTest,id)
    const [app] = useApiState(api,getapp,id)
    const anyError = useApiAnyError(api)
    return <div>
        <div>错误:{anyError ? anyError?.message : "没有错误"}</div>
        <div>结果:{JSON.stringify(test)}</div>
    </div>
}

useApiAnyLoading

切记是一个组件里面的 这个hooks用户一个组件的所有请求状态，意思就是一个组件所有的请求只要有一个没有完成它就还是请求中。

案例

import {useApi,useApiState,useApiAnyLoading} from "cyl-hooks-api"
import {getTest} from "./test.ts"
import {getapp} from "./app.ts"

export default function Component(){
    const api = useApi()
    const [id,setId] = useState(0)
    const [test] = useApiState(api,getTest,id)
    const [app] = useApiState(api,getapp,id)
    const AnyLoading = useApiAnyLoading(api)
    return <div>
        <div>状态:{AnyLoading ? "请求中" : "请求完成"}</div>
        <div>结果:{JSON.stringify(test)}</div>
    </div>
}

useCoEffect

与useEffect类似，可以接受一个Generator函数callback， callback函数中可以 yield Promise，与async函数中的await Promise功能相同 当deps发生变化或Component被卸载的时候， 这个Generator函数的执行会中断在当前的yield位置。 中断时既不执行下一个语句，也不抛出异常， 但finally块在中断后仍会被执行。 callback函数的finally块中可以使用isCancelled检查 当前执行过程是否被取消

案例

import {useApi} from "cyl-hooks-api"
import {useCoEffect} from "cyl-hooks-api/useCo"
import {getTest} from "./test.ts"
import {getapp} from "./app.ts"

export default function Component(){
    const api = useApi()
    const [appId,setAppId] = useState(0)
    const [testId,setTestId] = useState(0)
    useCoEffect(function *(){
        yield getapp(api,appId)
        yield getTest(api,testId)
        console.log("请求完毕")
    },[])
    return <div>
        useCoEffect
    </div>
}

useCoCallback

与useCallback类似，可以接受一个Generator函数callback， callback函数中可以 yield Promise，与async函数中的await Promise功能相同 当deps发生变化或Component被卸载的时候， 这个Generator函数的执行会中断在当前的yield位置。 中断时既不执行下一个语句，也不抛出异常， 但finally块在中断后仍会被执行。 callback函数的finally块中可以使用isCancelled检查 当前执行过程是否被取消

案例

import {useApi,useApiState} from "cyl-hooks-api"
import {useCoCallback} from "cyl-hooks-api/useCo"
import {getTest} from "./test.ts"
import {getApp} from "./app.ts"

export default function Component(){
    const api = useApi()
    const [testId,setTestId] = useState(0)
    const [test,loading,error] = useApiState(api,getTest,testId)
    const onChangeTest = useCoCallback(function *(){
        const i = yield getApp()
        setTestId(i)
    },[testId])
    return <div>
        <div>状态:{loading ? "请求中" : "请求完成"}</div>
        <div>错误:{error ? error?.message : "没有错误"}</div>
        <div>结果:{JSON.stringify(test)}</div>
        <button onclick={onChangeTest}>更新</button>
    </div>
}

useApiCollectionFetcher

通过上一个useApiState 返回的数据【必须是数组】里面的某个唯一字段来请求另一个接口

案例

import {useApi,useApiState} from "cyl-hooks-api"
import {useApiCollectionFetcher} from "cyl-hooks-api/useCollector"
import {getTests} from "./test.ts"
import {getAppByTestId} from "./app.ts"

export default function Component(){
    const api = useApi()
    const [testId,setTestId] = useState(0)
    const [tests] = useApiState(api,getTests)
    const [apps,loading,error] =useApiCollectionFetcher(api,tests,t=>t?.id,getAppByTestId)
    return <div>
        <div>状态:{loading ? "请求中" : "请求完成"}</div>
        <div>错误:{error ? error?.message : "没有错误"}</div>
        <div>结果:{JSON.stringify(apps)}</div>
        <button onclick={onChangeTest}>更新</button>
    </div>
}

useCollector

取出数据【必须是数组对象】中的一个字段然后以数组返回

案例

import {useApi,useApiState} from "cyl-hooks-api"
import {useCollector} from "cyl-hooks-api/useCollector"
import {getTests} from "./test.ts"
import {getAppByTestId} from "./app.ts"

export default function Component(){
    const api = useApi()
    const [testId,setTestId] = useState(0)
    const [tests,loading,error] = useApiState(api,getTests)
    const testIds = useCollector(tests,t=>t?.id)
    return <div>
        <div>状态:{loading ? "请求中" : "请求完成"}</div>
        <div>错误:{error ? error?.message : "没有错误"}</div>
        <div>结果:{JSON.stringify(testIds)}</div>
        <button onclick={onChangeTest}>更新</button>
    </div>
}

useWebsocket

连接websocket

案例

import {useApi,useApiState} from "cyl-hooks-api"
import {logger} from "cyl-hooks-api/utils"
import {useCollector} from "cyl-hooks-api/useCollector"
import {makeWebsocketUrlFromRelativeUrl,useWebsocket} from "cyl-hooks-api/useWebsocket"
import {getTests} from "./test.ts"
import {getAppByTestId} from "./app.ts"

export default function Component(){
    const api = useApi()
    useWebsocket("id",makeWebsocketUrlFromRelativeUrl("/ws"),(id,ws,eventName,eventData,data)=>{
       logger.info(data)
    },[])
    const [testId,setTestId] = useState(0)
    const [tests,loading,error] = useApiState(api,getTests)
    const testIds = useCollector(tests,t=>t?.id)
    return <div>
        <div>状态:{loading ? "请求中" : "请求完成"}</div>
        <div>错误:{error ? error?.message : "没有错误"}</div>
        <div>结果:{JSON.stringify(testIds)}</div>
        <button onclick={onChangeTest}>更新</button>
    </div>
}

工具方法

• parseJsonGraceful 优雅解析json字符串
• sleep 延时执行
• throttle 节流
• compare 对象深度比较
• assignDeep 对象深度合并
• isPlainObject 判断是否为普通对象
• logger 带日期和颜色的日志打印
• makeFriendly 格式化阿拉伯数字为万,亿
• equalsObj 深度比较两个对象是否相同
• isObject 判断此对象是否是Object类型
• isArray 判断此类型是否是Array类型
• formatSeconds 格式化秒 为 小时 分钟 秒
• Uint8ArrayToString Uint8Array 转 字符串
• ninePath
• dataSourceSliceOfECharts