Skip to content

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

License

Notifications You must be signed in to change notification settings

zhixiaoqiang/react-request-hook

Folders and files

NameName
Last commit message
Last commit date

Latest commit

29168c3 · Mar 6, 2021

History

18 Commits
Mar 6, 2021
Dec 12, 2019
Dec 12, 2019
Dec 12, 2019
Dec 12, 2019
Mar 6, 2021
Mar 6, 2021
Mar 6, 2021

Repository files navigation

@jzone/react-request-hook

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

Install

# 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

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 ? <div>loading...</div> : <div>error</div>
  }

  return <div>
    <p>hello useFetchData</p>
    <span onClick={() => fetchData({ a: 3 })}>onClick</span>
  </div>
}

Custom Hooks

// 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

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 ? <div>loading...</div> : <div>error</div>
  }

  return <div>
    <p>hello useFetchData</p>
    <span onClick={() => fetchData({ a: 3 })}>onClick</span>
  </div>
}

POST

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 ? <div>loading...</div> : <div>error</div>
  }

  return <div>
    <p>hello useFetchDataGet</p>
    <span onClick={() => fetchData({ a: 3 })}>onClick</span>
  </div>
}

Batch Request

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 (
    <div>
      <div>{res1}</div>
      <div>{res2}</div>
      <button onClick={() => fetchData({ a: 3 })}>refetch batch</button>
    </div>
  )
}

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

const [state, fetch] = useFetchData(requestFn[, initState])
参数 说明 类型 默认值
requestFn 自定义请求方法 function(data?)
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

const [state, fetch] = useFetchDataGet(url[, initState])
参数 说明 类型 默认值
url 请求地址 String

useFetchDataPost

const [state, fetch] = useFetchDataPost(url[, initState])
参数 说明 类型 默认值
url 请求地址 String

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published