Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/zhixiaoqiang/react-request-hook

🐶React hook for custom request，compatible with various lib, support redux
https://github.com/zhixiaoqiang/react-request-hook

react typescript

Last synced: 2 months ago
JSON representation

🐶React hook for custom request，compatible with various lib, support redux

Host: GitHub
URL: https://github.com/zhixiaoqiang/react-request-hook
Owner: zhixiaoqiang
License: mit
Created: 2019-12-12T06:11:49.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2021-03-06T04:55:33.000Z (over 3 years ago)
Last Synced: 2023-03-03T07:03:01.662Z (over 1 year ago)
Topics: react, typescript
Language: JavaScript
Homepage:
Size: 23.4 KB
Stars: 8
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-react-hooks - `@jzone/react-request-hook`
awesome-react-hooks-cn - `@jzone/react-request-hook`
awesome-react-hooks - `@jzone/react-request-hook`
fucking-awesome-react-hooks - `@jzone/react-request-hook`
awesome-react-hooks - `@jzone/react-request-hook`

README

        # @jzone/react-request-hook

> React hook for custom request，compatible with various lib, support redux

## Install

```bash

# npm

npm install @jzone/react-request-hook -D

# yarn

yarn add @jzone/react-request-hook -D

```

## Features

- Custom request support

- 0 dependency

- Coming soon to support TypeScript

## Usage

### Basic Usage

```jsx

import React, { useEffect } from 'react'

import useFetchData from '@jzone/react-request-hook'

import axios from '@/utils/axios'

export default function TestPages (props) {

  const [{ data, isLoading, error }, fetchData] = useFetchData(data => axios.get('/xxx', { params: data }))

  

  useEffect(() => {

    fetchData()

  }, [fetchData])

  if (!data) {

    return !error ? 
loading...
 : error

  }

  return 


    hello useFetchData

     fetchData({ a: 3 })}>onClick

  

}

```

### Custom Hooks

```js

// hook/index.js

import React from 'react'

import useFetchData from '@jzone/react-request-hook'

import axios from 'axios'

/**

 * @param {*} url url

 * @param {*} initState setInit state, defaultValue: undefined

 * @return {array} [state, memoizedFetchDateApi] state: { data, isLoading, error, ... }

 */

export const useFetchDataGet = (url, initState) => {

  const [state, memoizedFetchDateApi] = useFetchData(data => axios.get(url, { params: data }), initState)

  return [state, memoizedFetchDateApi]

}

/**

 * @param {*} url url

 * @param {*} initState setInit state, defaultValue: undefined

 * @return {array} [state, memoizedFetchDateApi] state: { data, isLoading, error, ... }

 */

export const useFetchDataPost = (url, initState) => {

  const [state, memoizedFetchDateApi] = useFetchData(data => axios.post(url, data), initState)

  return [state, memoizedFetchDateApi]

}

```

### GET

```jsx

import React, { useEffect } from 'react'

import useFetchData from '@jzone/react-request-hook'

import axios from '@/utils/axios'

import { useFetchDataGet } from '@/hook'

export default function TestPages (props) {

  const [{ data, isLoading, error }, fetchData] = useFetchData(data => axios.get('/xxx', { params: data }))

  // or

  // const [{ data, isLoading, error }, fetchData] = useFetchDataGet('/xxx')

  useEffect(() => {

    fetchData()

  }, [fetchData])

  if (!data) {

    return !error ? 
loading...
 : error

  }

  return 


    hello useFetchData

     fetchData({ a: 3 })}>onClick

  

}

```

### POST

```jsx

import React, { useEffect } from 'react'

import useFetchData from '@jzone/react-request-hook'

import axios from '@/utils/axios'

import { useFetchDataPost } from '@/hook'

export default function TestPages (props) {

  const [{ data, isLoading, error }, fetchData] = useFetchData(data => axios.post('/xxx', data))

  // or

  // const [{ data, isLoading, error }, fetchData] = useFetchDataPost('/xxx')

  useEffect(() => {

    fetchData()

  }, [fetchData])

  if (!data) {

    return !error ? 
loading...
 : error

  }

  return 


    hello useFetchDataGet

     fetchData({ a: 3 })}>onClick

  

}

```

### Batch Request

```jsx

function BatchRequest () {

  const batchFetchData = (data) => Promise.all([request1(data), request2(data)])

  const [{ loading, error, data }, fetchData] = useFetchData(batchFetchData)

  useEffect(() => { fetchData() }, [fetchData])

  if (loading) return 'loading...'

  if (error) return 'error'

  const [res1, res2] = data

  return (

    


      {res1}

      {res2}

       fetchData({ a: 3 })}>refetch batch

    

  )

}

```

## API

### Common API

参数 | 说明 | 类型 | 默认值

----- | ---- | --- | ---

state.data | 接口返回值 | any | {}

state.isLoading | 是否加载中 | Boolean or undefined | undefined

state.error | 接口请求错误 | any | null

fetch | 绑定state的请求方法，使用时fetch() 或者 fetch(data) | function(data?) |

initState | 初始/默认state, e.g: { isLoader: true } 初始为加载中 | Object |

### useFetchData

```js

const [state, fetch] = useFetchData(requestFn[, initState])

```

参数 | 说明 | 类型 | 默认值

----- | ---- | --- | ---

requestFn | 自定义请求方法 | function(data?) |

```js

requestFn e.g:

(data) => fetch('/xxx', { method: 'POST', body: data })

(data) => axios.get('/xxx', {params: data})

(data) => axios.post('/xxx', {params: data})

(data) => Promise(req1(data), req2(data))

...

```

### useFetchDataGet

```js

const [state, fetch] = useFetchDataGet(url[, initState])

```

参数 | 说明 | 类型 | 默认值

----- | ---- | --- | ---

url | 请求地址 | String |

### useFetchDataPost

```js

const [state, fetch] = useFetchDataPost(url[, initState])

```

参数 | 说明 | 类型 | 默认值

----- | ---- | --- | ---

url | 请求地址 | String |