网页制作模板手稿_怎么做网站优化排名_seo网络优化是做什么的_全网线报 实时更新

useRequest

import { post } from '@/api/http';
import { IResponse } from '@/types/common';
import { isString } from '@/utils/is';
import { useCallback, useEffect, useRef, useState } from 'react';
import { debounce, throttle } from 'lodash-es';
import useDebounce from './useDebounce';
import useThrottle from './useThrottle';type TApiFn<P = any, T = any> = (params: P) => Promise<IResponse<T>>;type TApi = string | TApiFn;const enum EType {debounce = 'debounce',throttle = 'throttle',
}interface IOptions<P = any, T = any> {manual?: boolean;ready?: boolean;params?: P;type?: `${EType}`;delay?: number;pollInterval?: number;onSuccess?: (data: T) => void;onFail?: () => void;
}interface IUseRequestResult<P = any, T = any> {data: T;loading: boolean;request: (params?: P) => void;stopPolling: () => void;
}const useRequest = <P = any, T = any>(api: TApi, options: IOptions): IUseRequestResult<P, T> => {const { manual, ready, params, pollInterval, type, delay } = options;const pollRef = useRef<number>();const pollingRef = useRef<boolean>(false);const [loading, setLoading] = useState<boolean>(false);const [data, setData] = useState<T>();const onRequest = useCallback((params?: P): Promise<T> => {let request: unknown = api;if (isString(api)) {request = (params?: P) => post(api as string, params);}setLoading(true);return (request as TApiFn<P, T>)(params).then((response: IResponse<T>) => {const { success, data } = response;if (success) {setData(data);return data;} else {throw response;}}).finally(() => setLoading(false));},[api]);const stopPolling = () => {if (pollRef.current) {pollingRef.current = false;clearInterval(pollRef.current);}};const request = useCallback((_params: P = params) => {if (pollingRef.current) return;if (pollInterval) {pollingRef.current = true;pollRef.current = setInterval(() => onRequest(_params), pollInterval);} else {onRequest(_params);}},[onRequest]);const debounceRequest = useDebounce(request, delay);const throttleRequest = useThrottle(request, delay);const readyRequest = useCallback(() => {if (type === EType.debounce) {return debounceRequest();}if (type === EType.throttle) {return throttleRequest();}return request();}, [request]);useEffect(() => {if (!manual && ready) {readyRequest();}}, [api, manual, ready]);return { loading, data, request, stopPolling };
};export default useRequest;

useDebounce

import { useEffect, useRef } from 'react';
import { debounce } from 'lodash-es';/*** @description: 防抖hook* @param {function} callback* @param {number} delay* @return {*}*/
const useDebounce = (callback: (...args: any) => void, delay: number = 500) => {const debounceRef = useRef<{ cancel: () => void } & ((...args: any) => void)>();useEffect(() => {debounceRef.current = debounce(callback, delay);return () => {debounceRef.current?.cancel();};}, [callback, delay]);return debounceRef.current;
};export default useDebounce;

useThrottle

import { useEffect, useRef } from 'react';
import { throttle } from 'lodash-es';/*** @description: 防抖hook* @param {function} callback* @param {number} delay* @return {*}*/
const useThrottle = (callback: (...args: any) => void, delay: number = 500) => {const debounceRef = useRef<{ cancel: () => void } & ((...args: any) => void)>();useEffect(() => {debounceRef.current = throttle(callback, delay);return () => {debounceRef.current?.cancel();};}, [callback, delay]);return debounceRef.current;
};export default useThrottle;