wolf-use-fetch
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    use-fetch

    react use-fetch hook

    安装

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

    npm install --save wolf-use-fetch

    使用

    useFetch

    需要一个必须的fetcher参数,fetcher是一个函数,返回一个PromisePromiseresolve的值(一般就指接口返回值)就是useFetch hook返回的对象中的data

    • 调用形式
    const {data, loading, setData, fetch} = useFetch(fetcher, defaultValue, deps, renderedFetchParams);
    • 参数说明
    参数 说明 类型 默认值 是否必填
    fetcher fetcher是一个函数,返回一个PromisePromiseresolve的值(一般就指接口返回值)就是useFetch hook返回的对象中的data (paramsObj?: any) => Promise -
    defaultValue 默认值 any - -
    deps fetch内部被useCallback包裹的依赖项数组 any[] [] -
    renderedFetchParams 首次useEffect的调用参数,不传则跳过 any - -
    • 返回结构说明:
    key 说明
    data fetcher 返回的 Promiseresolve 的值(一般就指接口返回值)。
    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 接口返回值的顺序 与传入useFetchAllfetchers的顺序一致,或者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>
      );
    };

    Install

    npm i wolf-use-fetch

    DownloadsWeekly Downloads

    1

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    20.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • jerry_cheung