use-fetch

react use-fetch hook

安装

注意：使用了react hooks，所以要求在react>=16.8.0版本中使用。

npm install --save wolf-use-fetch

使用

useFetch

需要一个必须的fetcher参数，fetcher是一个函数，返回一个Promise，Promise的resolve的值（一般就指接口返回值）就是useFetch hook返回的对象中的data。

• 调用形式

const {data, loading, setData, fetch} = useFetch(fetcher, defaultValue, deps, renderedFetchParams);

• 参数说明

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | | -- | -- | -- | -- | -- | | fetcher | fetcher是一个函数，返回一个Promise，Promise的resolve的值（一般就指接口返回值）就是useFetch hook返回的对象中的data。 | (paramsObj?: any) => Promise | - | 是 | | defaultValue | 默认值 | any | - | - | | deps | fetch内部被useCallback包裹的依赖项数组 | any[] | [] | - | | renderedFetchParams | 首次useEffect的调用参数，不传则跳过 | any | - | - |

• 返回结构说明：

| key | 说明 | | -- | -- | | data | fetcher 返回的 Promise 的 resolve 的值（一般就指接口返回值）。 | | loading | 接口loading。| | setData | 外部手动设置值。 |

• Demo

import React, { useEffect } from 'react';
import { Spin } from 'antd';
import useFetch from 'wolf-use-fetch';
import axios from 'axios';

interface IProps {
}

const fetcher = params =>
  axios.get('/apis/an_api_url', { params }).then(res => res.data);

const Demo = (props: IProps) => {
  const { data, loading, fetch, setData } = useFetch(fetcher);

  useEffect(() => {
    fetch({
      params: 1
    });
  }, []);

  const onManual = () => {
    setData({
      result: 'an_api_url_result'
    })
  };

  return (
    <Spin spinning={loading}>
      <div>{JSON.stringify(data)}</div>
      <div onClick={onManual}>手动设置值</div>
    </Spin>
  );
};

export default Demo;

useFetchAuto

实际是useFetch的语法糖。在useFetch的基础上自动执行首次useEffect时的调用，需要传首次调用的参数。返回与useFetch一样。

• 调用形式

const {data, loading, setData, fetch} = useFetchAuto(fetcher, renderedFetchParams, defaultValue);

• 参数说明

参考useFetch。

• 返回结构说明：

参考useFetch。

• Demo

import React, { useEffect } from 'react';
import { Spin } from 'antd';
import useFetch, { useFetchAuto } from 'wolf-use-fetch';
import axios from 'axios';

interface IProps {
}

const fetcher = params =>
  axios.get('/apis/an_api_url', { params }).then(res => res.data);

const Demo = (props: IProps) => {
  const { data, loading, fetch } = useFetchAuto(fetcher, {params: 1});

  return (
    <Spin spinning={loading}>
      <div>{JSON.stringify(data)}</div>
    </Spin>
  );
};

export default Demo;

useFetchAll

一些可以一起发起的异步接口就很适合用useFetchAll。内部会用Promise.all调用传入的fetchers数组。使用跟useFetch大同小异，区别在于返回的值是按照Promise.all的返回形式，是个有顺序的数组。也可以是一个key值对象，返回会按照key值返回。

• 调用形式

const {data, loading, setData, fetch} = useFetchAll(fetchers, deps);

• 参数说明

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | | -- | -- | -- | -- | -- | | fetchers | fetchers是一个fetcher数组或者一个fetcher对象。 | ((paramsObj?: any) => Promise)[] 或 {[key: string]: (paramsObj?: any) => Promise} | - | 是 | |deps | fetch内部被useCallback包裹的依赖项数组 | any[] | [] | - |

• 返回结构说明：

| key | 说明 | | -- | -- | | data | 接口返回值的顺序 与传入useFetchAll的fetchers的顺序一致，或者key值对应。 | | loading | 接口loading。| | setData | 外部手动设置值。 |

• Demo

import React, { useState, useEffect, useCallback } from 'react';
import {useFetchAll} from 'wolf-use-fetch';
import { Spin } from 'antd';

interface IProps {
}

const fetcher1 = params =>
  axios.get('/apis/first_api_url', { params }).then(res => res.data);

const fetcher2 = params =>
  axios.get('/apis/twice_api_url', { params }).then(res => res.data);

const Demo = (props: IProps) => {
  // 数组形式
  const {data: data1 = [], loading: loading1, fetch: fetchData1} = useFetchAll([
    fetcher1,
    fetcher2
  ]);

  // 对象形式
  const {data: data2 = [], loading: loading2, fetch: fetchData2} = useFetchAll({
    fetcher1,
    fetcher2,
  });

  // 接口返回值的顺序 与传入useFetchAll的fetchers的顺序一致，这是Promise.all的逻辑
  const [
    fetcherArrayData1,
    fetcherArrayData2,
  ] = data1;

  // 接口返回值也是个对象 与传入useFetchAll的fetchers的key值对应
  const {
    fetcher1: fetcherObjectData1,
    fetcher2: fetcherObjectData2
   } = data2;

  useEffect(() => {
    // 调用参数也是个数组，传入的顺序也与传入useFetchAll的fetchers的顺序一致
    fetchData1([
      {fetcher1_params: 1}, // fetcher1的参数
      {fetcher1_params: 1}, // fetcher2的参数
    ]);
  
    // 调用参数也是个对象，传入的key值与传入useFetchAll的fetchers key值对应
    fetchData2({
      fetcher1: {fetcher1_params: 1}, // fetcher1的参数
      fetcher2: {fetcher2_params: 1}, // fetcher2的参数
    });
  }, []);

  return (
    <Spin spinning={loading1 || loading2}>
      {JSON.stringify(fetcherArrayData1)}
      {JSON.stringify(fetcherArrayData2)}
      {JSON.stringify(fetcherObjectData2)}
      {JSON.stringify(fetcherObjectData2)}
    </Spin>
  );
};