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

Keywords

FAQs

What is cyl-hooks-api?

Is cyl-hooks-api popular?

Is cyl-hooks-api well maintained?

Last updated on 19 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket