安装

yarn add cyl-hooks-tools 

pnpm add cyl-hooks-tools 

cnpm install cyl-hooks-tools --save

npm install cyl-hooks-tools --save

// Make sure to add code blocks to your code group

初始化

注意

初始化操作必须按照如下进行

import { createHttpClient,IHttpClient } from "cyl-hooks-tools"
// 创建http服务 【基于axios】
// 这个是cyl-hooks-tools 提供的简便的的创建http服务方法 ，
//当然可以不使用这个方法，只要自定义的httpClient实现了 get post delete put request 这个几个方法就好
// 注意: httpClient 必须实现get post delete put request 否则将无法进行之后的步骤
const httpClient = createHttpClient((axios)=>{
  axios.interceptors.response.use(res=>{
    return res.data
  },err=>{
    console.error(err)
  })

  return axios
})
export default httpClient

import ReactDOM from 'react-dom/client'
import request from "./request.ts"
import { ApiProvider } from "cyl-hooks-tools"

function Component(){
  return <div>component</div>
}


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  // 最外层必须使用ApiProvider包裹
  <ApiProvider<IHttpClient,object> httpClient={request} initAuth={{
    id:1
  }}>
    <Component />
  </ApiProvider>,
)

// Make sure to add code blocks to your code group

使用

import {IHttpClient,IContext} from "cyl-hooks-tools"



export interface Test {
    id:number
    name:string
    createTime:number
}

export function getTest(ctx:IContext<IHttpClient,object>):Promise<Test>{
  return ctx.get("https://chuyanlon.github.io/cyl-hooks-tools-doc/api/test.json")
}

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


function Component() {
  const api = useApi<IContext<IHttpClient,object>>();
  const [test] = useApiState(api,getTest)
  return (
    <div>
        测试id{test?.id}
        测试名字{test?.name}
    </div>
  )
}

export default Component

// Make sure to add code blocks to your code group