{"id":13450255,"url":"https://github.com/zhixiaoqiang/react-request-hook","last_synced_at":"2026-01-12T07:55:56.290Z","repository":{"id":54165100,"uuid":"227533513","full_name":"zhixiaoqiang/react-request-hook","owner":"zhixiaoqiang","description":"🐶React hook for custom request，compatible with various lib, support redux","archived":false,"fork":false,"pushed_at":"2023-06-29T07:05:09.000Z","size":31,"stargazers_count":11,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-28T17:39:13.498Z","etag":null,"topics":["react","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhixiaoqiang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-12T06:11:49.000Z","updated_at":"2024-08-08T11:29:35.000Z","dependencies_parsed_at":"2024-07-31T07:12:15.827Z","dependency_job_id":"a2f49713-c5e9-44ab-9693-674b4b059ed0","html_url":"https://github.com/zhixiaoqiang/react-request-hook","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhixiaoqiang%2Freact-request-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhixiaoqiang%2Freact-request-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhixiaoqiang%2Freact-request-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhixiaoqiang%2Freact-request-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhixiaoqiang","download_url":"https://codeload.github.com/zhixiaoqiang/react-request-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245130728,"owners_count":20565701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","typescript"],"created_at":"2024-07-31T07:00:32.814Z","updated_at":"2026-01-12T07:55:56.236Z","avatar_url":"https://github.com/zhixiaoqiang.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# @jzone/react-request-hook\n\n\u003e React hook for custom request，compatible with various lib, support redux\n\n## Install\n\n```bash\n# npm\nnpm install @jzone/react-request-hook -D\n\n# yarn\nyarn add @jzone/react-request-hook -D\n```\n\n## Features\n\n- Custom request support\n- 0 dependency\n- Coming soon to support TypeScript\n\n## Usage\n\n### Basic Usage\n\n```jsx\nimport React, { useEffect } from 'react'\nimport useFetchData from '@jzone/react-request-hook'\nimport axios from '@/utils/axios'\n\nexport default function TestPages (props) {\n  const [{ data, isLoading, error }, fetchData] = useFetchData(data =\u003e axios.get('/xxx', { params: data }))\n  \n  useEffect(() =\u003e {\n    fetchData()\n  }, [fetchData])\n\n  if (!data) {\n    return !error ? \u003cdiv\u003eloading...\u003c/div\u003e : \u003cdiv\u003eerror\u003c/div\u003e\n  }\n\n  return \u003cdiv\u003e\n    \u003cp\u003ehello useFetchData\u003c/p\u003e\n    \u003cspan onClick={() =\u003e fetchData({ a: 3 })}\u003eonClick\u003c/span\u003e\n  \u003c/div\u003e\n}\n```\n\n### Custom Hooks\n\n```js\n// hook/index.js\nimport React from 'react'\nimport useFetchData from '@jzone/react-request-hook'\nimport axios from 'axios'\n/**\n * @param {*} url url\n * @param {*} initState setInit state, defaultValue: undefined\n * @return {array} [state, memoizedFetchDateApi] state: { data, isLoading, error, ... }\n */\nexport const useFetchDataGet = (url, initState) =\u003e {\n  const [state, memoizedFetchDateApi] = useFetchData(data =\u003e axios.get(url, { params: data }), initState)\n\n  return [state, memoizedFetchDateApi]\n}\n\n/**\n * @param {*} url url\n * @param {*} initState setInit state, defaultValue: undefined\n * @return {array} [state, memoizedFetchDateApi] state: { data, isLoading, error, ... }\n */\nexport const useFetchDataPost = (url, initState) =\u003e {\n  const [state, memoizedFetchDateApi] = useFetchData(data =\u003e axios.post(url, data), initState)\n\n  return [state, memoizedFetchDateApi]\n}\n```\n\n### GET\n\n```jsx\nimport React, { useEffect } from 'react'\nimport useFetchData from '@jzone/react-request-hook'\nimport axios from '@/utils/axios'\nimport { useFetchDataGet } from '@/hook'\n\nexport default function TestPages (props) {\n  const [{ data, isLoading, error }, fetchData] = useFetchData(data =\u003e axios.get('/xxx', { params: data }))\n  // or\n  // const [{ data, isLoading, error }, fetchData] = useFetchDataGet('/xxx')\n  useEffect(() =\u003e {\n    fetchData()\n  }, [fetchData])\n\n  if (!data) {\n    return !error ? \u003cdiv\u003eloading...\u003c/div\u003e : \u003cdiv\u003eerror\u003c/div\u003e\n  }\n\n  return \u003cdiv\u003e\n    \u003cp\u003ehello useFetchData\u003c/p\u003e\n    \u003cspan onClick={() =\u003e fetchData({ a: 3 })}\u003eonClick\u003c/span\u003e\n  \u003c/div\u003e\n}\n```\n\n### POST\n\n```jsx\nimport React, { useEffect } from 'react'\nimport useFetchData from '@jzone/react-request-hook'\nimport axios from '@/utils/axios'\nimport { useFetchDataPost } from '@/hook'\n\nexport default function TestPages (props) {\n  const [{ data, isLoading, error }, fetchData] = useFetchData(data =\u003e axios.post('/xxx', data))\n  // or\n  // const [{ data, isLoading, error }, fetchData] = useFetchDataPost('/xxx')\n  useEffect(() =\u003e {\n    fetchData()\n  }, [fetchData])\n\n  if (!data) {\n    return !error ? \u003cdiv\u003eloading...\u003c/div\u003e : \u003cdiv\u003eerror\u003c/div\u003e\n  }\n\n  return \u003cdiv\u003e\n    \u003cp\u003ehello useFetchDataGet\u003c/p\u003e\n    \u003cspan onClick={() =\u003e fetchData({ a: 3 })}\u003eonClick\u003c/span\u003e\n  \u003c/div\u003e\n}\n```\n\n### Batch Request\n\n```jsx\nfunction BatchRequest () {\n  const batchFetchData = (data) =\u003e Promise.all([request1(data), request2(data)])\n  const [{ loading, error, data }, fetchData] = useFetchData(batchFetchData)\n\n  useEffect(() =\u003e { fetchData() }, [fetchData])\n\n  if (loading) return 'loading...'\n  if (error) return 'error'\n\n  const [res1, res2] = data\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e{res1}\u003c/div\u003e\n      \u003cdiv\u003e{res2}\u003c/div\u003e\n      \u003cbutton onClick={() =\u003e fetchData({ a: 3 })}\u003erefetch batch\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## API\n\n### Common API\n\n参数 | 说明 | 类型 | 默认值\n----- | ---- | --- | ---\nstate.data | 接口返回值 | any | {}\nstate.isLoading | 是否加载中 | Boolean or undefined | undefined\nstate.error | 接口请求错误 | any | null\nfetch | 绑定state的请求方法，使用时fetch() 或者 fetch(data) | function(data?) |\ninitState | 初始/默认state, e.g: { isLoader: true } 初始为加载中 | Object |\n\n### useFetchData\n\n```js\nconst [state, fetch] = useFetchData(requestFn[, initState])\n```\n\n参数 | 说明 | 类型 | 默认值\n----- | ---- | --- | ---\nrequestFn | 自定义请求方法 | function(data?) |\n\n```js\nrequestFn e.g:\n\n(data) =\u003e fetch('/xxx', { method: 'POST', body: data })\n(data) =\u003e axios.get('/xxx', {params: data})\n(data) =\u003e axios.post('/xxx', {params: data})\n(data) =\u003e Promise(req1(data), req2(data))\n...\n```\n\n### useFetchDataGet\n\n```js\nconst [state, fetch] = useFetchDataGet(url[, initState])\n```\n\n参数 | 说明 | 类型 | 默认值\n----- | ---- | --- | ---\nurl | 请求地址 | String |\n\n### useFetchDataPost\n\n```js\nconst [state, fetch] = useFetchDataPost(url[, initState])\n```\n\n参数 | 说明 | 类型 | 默认值\n----- | ---- | --- | ---\nurl | 请求地址 | String |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhixiaoqiang%2Freact-request-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhixiaoqiang%2Freact-request-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhixiaoqiang%2Freact-request-hook/lists"}