封装一个请求的hook(react函数组件)

对于后台系统,上面筛选,下面表格分页的页面,这个hook非常实用

omitBy方法:过滤不为undefined的对象属性

javascript 复制代码
export const omitBy = <T extends IObject, K extends keyof T>(object:T, predicate:(value:T[K]) => boolean):IObject => {
  if (typeof object !== 'object') {
    return object;
  }
  const newObject:IObject = {};

  Object.keys(object).forEach((item) => {
    if (predicate(object[item])) {
      newObject[item] = object[item];
    }
  });
  return newObject;
};
javascript 复制代码
export const useFetchHook = (fetchPromiseFunc:(params?:any) => Promise<any>, params?:any, initialData?:any, deps?:ReadonlyArray<any>, fetchFlag?:boolean) => {
  const [data, setData] = useState(initialData);
  const [loading, setLoading] = useState(false);
  console.log('重新执行了该hook');

  // 处理对象参数:当value为空时,omit该参数
  const formattedParams = omitBy(params, (item) => item !== undefined );
  useEffect(() => {
    const fetchData = async() => {
      try {
        setLoading && setLoading(true);
        const result = await fetchPromiseFunc(formattedParams);
        if (result.status.toString() !== '200') {
          if(result.data.error_code) {
            //todo sth...
          } else if(result.data.statusText){
            message.error(result.data.statusText);
          } else if(result.data.msg) {
            message.error(result.data.msg || '接口异常');
          }
        } else {
          setData(result.data);
        }
        setLoading && setLoading(false);
      } catch (error) {
        setLoading && setLoading(false);
      }
    };
    if(fetchFlag === undefined || fetchFlag) {
      fetchData();
    }else {
      setData(initialData);
    }
  }, deps ? deps : []);
  return [data, loading];
};

使用

javascript 复制代码
const [classData, loading] = useFetchHook(yourFetchFunc, { ...filterParams, ...paginationParams }, [], [filterParams, paginationParams, filterFlag]);

filterParams: 用在筛选条件

paginationParams:分页筛选

filterFlag:其他自定义筛选

相关推荐
T^T尚3 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志3 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3923 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
GISer_Jing4 小时前
React渲染相关内容——渲染流程API、Fragment、渲染相关底层API
javascript·react.js·ecmascript
山猪打不过家猪4 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山4 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生4 小时前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive
对卦卦上心4 小时前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师4 小时前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js
啵咿傲4 小时前
在React中实践一些软件设计思想 ✅
前端·react.js·前端框架