学习ahooksuseRequest并实现手写-编程学习网

前言

最近业务没有之前紧张了，也是消失了一段时间，也总结了一些之前业务上的问题。

和同事沟通也是发现普通的async + await + 封装api在复杂业务场景下针对于请求的业务逻辑比较多，也是推荐我去学习一波ahooks，由于问题起源于请求，因此作者也是直接从 useRequest 开始看起。

附ahooks useRequest链接:

ahooks-v2.js.org/zh-CN/hooks…

实现

话不多说，手写直接开始，参考几个比较常用的 useRequest 能力来一个个实现吧。

基础版（雏形）

先上代码：

useRequest.ts

interface UseRequestOptionsProps {
  
  initialData?: object;
  
  onSuccess?: (res: any) => void;
}
const useRequest = (
  requestFn: (
    initialData?: object | string | [],
  ) => Promise<SetStateAction<any>>,
  options: UseRequestOptionsProps,
) => {
  const [data, setData] = useState<SetStateAction<any>>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const { initialData, onSuccess } = options;
  useEffect(() => {
    setLoading(true);
    setError(null);
    setData(null);
    request();
  }, [requestFn]);
  // useRequest业务逻辑
  const request = async () => {
    try {
      const res = await requestFn(initialData);
      setData(res);
      // 请求成功响应回调
      onSuccess && onSuccess(res);
    } catch (err) {
      err && setError(JSON.stringify(err));
    } finally {
      setLoading(false);
    }
  };
  return { data, loading, error };
};
export default useRequest;

使用

const { data, loading, error } = useRequest(
    queryCompensatoryOrderSituation,
    {
        initialData: {
            compensatoryId,
        }
        onSuccess: (res) => {
            console.log('success request!', res);
        },
    },
);

useRequest 对于请求函数的写法并无过多要求，只要是一个异步function且返回一个promise对象，即可传入useRequest的第一个参数中，而第二个参数则是一系列的可选配置项，雏形版本我们暂时只支持onSuccess。

手动触发

代码改造后：

useRequest.ts

interface UseRequestOptionsProps {
  
  manual?: boolean;
  
  initialData?: object;
  
  onSuccess?: (res: any) => void;
}
const useRequest = (
  requestFn: (
    initialData?: object | string | [],
  ) => Promise<SetStateAction<any>>,
  options: UseRequestOptionsProps,
) => {
  const [data, setData] = useState<SetStateAction<any>>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const { manual, initialData, onSuccess } = options;
  useEffect(() => {
    setLoading(true);
    setError(null);
    setData(null);
    !manual && request();
  }, [manual]);
  // useRequest业务逻辑
  const request = async () => {
    try {
      const res = await requestFn(initialData);
      setData(res);
      // 请求成功响应回调
      onSuccess && onSuccess(res);
    } catch (err) {
      err && setError(JSON.stringify(err));
    } finally {
      setLoading(false);
    }
  };
  return { data, loading, error, request };
};
export default useRequest;

使用

const { data, loading, error, request } = useRequest(
    queryCompensatoryOrderSituation,
    {
        manual: true,
        initialData: {
            compensatoryId,
        },
        onSuccess: (res) => {
            console.log('success request!', res);
        },
    },
);
request();

手动执行的逻辑主要是根据manual参数砍掉useRequest mount阶段的渲染请求，把执行请求的能力暴露出去，在页面中去手动调用request()来触发。

轮询与手动取消

代码改造后：

useRequest.ts

interface UseRequestOptionsProps {
  
  manual?: boolean;
  
  initialData?: object;
  
  pollingInterval?: number | null;
  
  onSuccess?: (res: any) => void;
}
const useRequest = (
  requestFn: (
    initialData?: object | string | [],
  ) => Promise<SetStateAction<any>>,
  options: UseRequestOptionsProps,
) => {
  const [data, setData] = useState<SetStateAction<any>>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const status = useRef<boolean>(false);
  const pollingIntervalTimer = useRef<NodeJS.Timer | null>(null);
  const { manual, initialData, pollingInterval, onSuccess } = options;
  useEffect(() => {
    setLoading(true);
    setError(null);
    setData(null);
    !manual && request();
  }, [manual]);
  // useRequest业务逻辑
  const request = async () => {
   try {
      !status.current && (status.current = true);
      if (pollingInterval && status.current) {
        pollingIntervalTimer.current = setTimeout(() => {
          status.current && request();
        }, pollingInterval);
      }
      const res = await requestFn(initialData);
      setData(res);
      // 请求成功响应回调
      onSuccess && onSuccess(res);
    } catch (err) {
      err && setError(JSON.stringify(err));
    } finally {
      setLoading(false);
    }
  };
  return { data, loading, error, request, cancel };
};
// 取消
const cancel = () => {
  if (pollingIntervalTimer.current) {
    clearTimeout(pollingIntervalTimer.current);
    pollingIntervalTimer.current = null;
    status.current && (status.current = false);
  }
};
export default useRequest;

使用

const { data, loading, error, request, cancel } = useRequest(
    queryCompensatoryOrderSituation,
    {
        manual: true,
        initialData: {
            compensatoryId,
        },
        pollingInterval: 1000,
        onSuccess: (res) => {
            console.log('success request!', res);
        },
    },
);
request();
...
// 轮询到理想数据后
cancel();

轮询的支持在hook中主要用到了timer setTimeout的递归思路，同时给出一个status状态值判断是否在轮询中，当调用端执行cancel()，status则为false；当轮询开始，则status为true。

而cancel()的能力主要也是取消了timer的递归请求逻辑，并且轮询的业务场景和manual: true配合很多。

依赖请求（串型请求）

代码改造后：

useRequest.ts

interface UseRequestOptionsProps {
  
  manual?: boolean;
  
  initialData?: object;
  
  pollingInterval?: number | null;
  
  ready?: boolean;
  
  onSuccess?: (res: any) => void;
}
const useRequest = (
  requestFn: (
    initialData?: object | string | [],
  ) => Promise<SetStateAction<any>>,
  options: UseRequestOptionsProps,
) => {
  const [data, setData] = useState<SetStateAction<any>>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const status = useRef<boolean>(false);
  const pollingIntervalTimer = useRef<NodeJS.Timer | null>(null);
  const {
    manual,
    initialData,
    pollingInterval,
    ready = true,
    onSuccess,
  } = options;
  useEffect(() => {
    setLoading(true);
    setError(null);
    setData(null);
    !manual && ready && request();
  }, [manual, ready]);
  // useRequest业务逻辑
  const request = async () => {
   try {
      !status.current && (status.current = true);
      if (pollingInterval && status.current) {
        pollingIntervalTimer.current = setTimeout(() => {
          status.current && request();
        }, pollingInterval);
      }
      const res = await requestFn(initialData);
      setData(res);
      // 请求成功响应回调
      onSuccess && onSuccess(res);
    } catch (err) {
      err && setError(JSON.stringify(err));
    } finally {
      setLoading(false);
    }
  };
  return { data, loading, error, request, cancel };
};
// 取消
const cancel = () => {
  if (pollingIntervalTimer.current) {
    clearTimeout(pollingIntervalTimer.current);
    pollingIntervalTimer.current = null;
    status.current && (status.current = false);
  }
};
export default useRequest;

使用

const [mountLoading, setMountLoading] = useState<boolean>(false);
useEffect(() => {
    setMountLoading(true);
}, [2000])
const { data, loading, error, request, cancel } = useRequest(
    queryCompensatoryOrderSituation,
    {
        initialData: {
            compensatoryId,
        },
        pollingInterval: 1000,
        ready: mountLoading,
        onSuccess: (res) => {
            console.log('success request!', res);
        },
    },
);

依赖请求的思路就是在hook中加入一个ready字段，也是在基于manual一层的限制后又加了一层，来判断是否在hook加载时是否做默认请求，而当option中的ready更新（为true）时，hook自动更新从而发起请求。

常用于页面中A请求完成后执行B请求，B请求的ready字段依赖于A请求的data/loading字段。

防抖与节流

防抖和节流的实现比较简单，依赖于lodash库，包装了一下request函数的请求内容。

代码如下：

useRequest.ts

interface UseRequestOptionsProps {
  
  manual?: boolean;
  
  initialData?: object;
  
  pollingInterval?: number | null;
  
  ready?: boolean;
  
  debounceInterval?: number;
  
  throttleInterval?: number;
  
  onSuccess?: (res: any) => void;
}
const useRequest = (
  requestFn: (
    initialData?: object | string | [],
  ) => Promise<SetStateAction<any>>,
  options: UseRequestOptionsProps,
) => {
  const [data, setData] = useState<SetStateAction<any>>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const status = useRef<boolean>(false);
  const pollingIntervalTimer = useRef<NodeJS.Timer | null>(null);
  const {
    manual,
    initialData,
    pollingInterval,
    ready = true,
    debounceInterval,
    throttleInterval
    onSuccess,
  } = options;
  useEffect(() => {
    setLoading(true);
    setError(null);
    setData(null);
    !manual && ready && request();
  }, [manual, ready]);
 //  请求
 const request = () => {
  if (debounceInterval) {
    lodash.debounce(requestDoing, debounceInterval)();
  } else if (throttleInterval) {
    lodash.throttle(requestDoing, throttleInterval)();
  } else {
    requestDoing();
  }
};
// useRequest业务逻辑
const requestDoing = async () => {
  try {
    !status.current && (status.current = true);
    if (pollingInterval && status.current) {
      pollingIntervalTimer.current = setTimeout(() => {
        status.current && request();
      }, pollingInterval);
    }
    const res = await requestFn(initialData);
    setData(res);
    // 请求成功响应回调
    onSuccess && onSuccess(res);
  } catch (err) {
    err && setError(JSON.stringify(err));
  } finally {
    setLoading(false);
  }
};
// 取消
const cancel = () => {
  if (pollingIntervalTimer.current) {
    clearTimeout(pollingIntervalTimer.current);
    pollingIntervalTimer.current = null;
    status.current && (status.current = false);
  }
};
export default useRequest;

使用

const { data, loading, error, request, cancel } = useRequest(
    queryCompensatoryOrderSituation,
    {
        manual: true,
        initialData: {
            compensatoryId,
        },
        debounceInterval: 1000,     // 防抖
        throttleInterval: 1000,     // 节流
        onSuccess: (res) => {
            console.log('success request!', res);
        },
    },
);
for(let i = 0; i < 10000; i++) {
    request();
}

在hook中，通过lodash.debounce/lodash.throttle来包装request函数主体，通过option中的判断来执行对应的包装体函数。

缓存与依赖更新

改造后的代码（最终代码）如下：

useRequest.ts

import {
  useState,
  useEffect,
  useRef,
  SetStateAction,
  useCallback,
} from 'react';
import lodash from 'lodash';
interface UseRequestOptionsProps {
  
  manual?: boolean;
  
  initialData?: object;
  
  pollingInterval?: number | null;
  
  ready?: boolean;
  
  debounceInterval?: number;
  
  throttleInterval?: number;
  
  loadingDelay?: number;
  
  refreshDeps?: any[];
  
  onSuccess?: (res: any) => void;
}
const useRequest = (
  requestFn: (
    initialData?: object | string | [],
  ) => Promise<SetStateAction<any>>,
  options: UseRequestOptionsProps,
) => {
  const [data, setData] = useState<SetStateAction<any>>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const status = useRef<boolean>(false);
  const pollingIntervalTimer = useRef<NodeJS.Timer | null>(null);
  const {
    manual,
    initialData,
    pollingInterval,
    ready = true,
    debounceInterval,
    throttleInterval,
    loadingDelay,
    refreshDeps,
    onSuccess,
  } = options;
  useEffect(() => {
    if (loadingDelay) {
      setTimeout(() => {
        status && setLoading(true);
      }, loadingDelay);
    }
    setError(null);
    setData(null);
    // 手动触发request
    !manual && ready && request();
  }, [manual, ready, ...(Array.isArray(refreshDeps) ? refreshDeps : [])]);
  //  请求
  const request = () => {
    if (debounceInterval) {
      lodash.debounce(requestDoing, debounceInterval)();
    } else if (throttleInterval) {
      lodash.throttle(requestDoing, throttleInterval)();
    } else {
      requestDoing();
    }
  };
  // useRequest业务逻辑
  const requestDoing = async () => {
    try {
      !status.current && (status.current = true);
      if (pollingInterval && status.current) {
        pollingIntervalTimer.current = setTimeout(() => {
          status.current && request();
        }, pollingInterval);
      }
      const res = await requestFn(initialData);
      setData(res);
      // 请求成功响应回调
      onSuccess && onSuccess(res);
    } catch (err) {
      err && setError(JSON.stringify(err));
    } finally {
      setLoading(false);
    }
  };
  // 取消
  const cancel = () => {
    if (pollingIntervalTimer.current) {
      clearTimeout(pollingIntervalTimer.current);
      pollingIntervalTimer.current = null;
      status.current && (status.current = false);
    }
  };
  // 缓存
  const cachedFetchData = useCallback(() => data, [data]);
  return { data, loading, error, request, cancel, cachedFetchData };
};
export default useRequest;

使用

const [mountLoading, setMountLoading] = useState<boolean>(false);
const [updateLoading, setUpdateLoading] = useState<boolean>(false);
setTimeout(() => {
    setMountLoading(true);
}, 1000);
setTimeout(() => {
    setUpdateLoading(true);
}, 2000);
const { data, loading, error, request, cancel, cachedFetchData } = useRequest(
    queryCompensatoryOrderSituation,
    {
        manual: true,
        initialData: {
            compensatoryId,
        },
        debounceInterval: 1000,     // 防抖
        throttleInterval: 1000,     // 节流
        refreshDeps: [mountLoading, updateLoading],
        onSuccess: (res) => {
            console.log('success request!', res);
        },
    },
);

缓存的主体思路是在useRequest中拿到第一次数据后通过useCallback来透出data依赖来保存，同时向外暴露一个cachedFetchData来过渡data从null到请求到接口数据的过程。

依赖更新的思路则是在页面中给useRequest一系列依赖状态一并加入在hook的请求副作用中，监听到页面中依赖改变，则重新请求，具体实现则是refreshDeps参数。

结尾

花了一上午时间，一个简易版本的useRequest实现了，也是通过实现学习到了一些请求思路，在业务复杂的场景下也是很需要这类请求工具来让开发者的注意力从请求处理转移集中在业务逻辑中。

以上就是学习ahooks useRequest并实现手写的详细内容，更多关于ahooks useRequest手写的资料请关注编程网其它相关文章！

文章详情

学习ahooksuseRequest并实现手写

目录

前言

实现

基础版（雏形）

手动触发

轮询与手动取消

依赖请求（串型请求）

防抖与节流

缓存与依赖更新

结尾

软考中级精品资料免费领

相关文章

猜你喜欢

学习ahooksuseRequest并实现手写

机器学习python实战之手写数字识别

学习Redis Cluster并手动搭建集群

Java怎么实现手写线程池并测试

C++学习贝叶斯分类器实现手写数字识别示例解析

Java实现手写线程池实例并测试详解

Mycat学习实战-Mycat读写分离

Vue源码学习记录之手写vm.$mount方法

学习Go语言并编写爬虫的详细指南

面试手写实现Promise.all

C++技术中的机器学习：使用C++实现机器学习算法的并行编程

Android实现手写签名

学习python之编写简单乘法口诀表实现代码

Python 学习笔记中，如何实现高效的并发编程？

手写实现JS中的new

JavaScript怎么实现手写promise

Android实现手写板功能

学习Go语言文档中的io.PipeWriter函数实现管道写入

C/S架构学习之多线程实现TCP并发服务器

javascript算法学习实现代码