使用自定义Hooks抽象React中重复的加载和错误处理模式

// 加载所有供应商
const [loadingAllVendors, setLoadingAllVendors] = useState<boolean>(true);
const loadAllVendorsErrorTimeout = useRef<NodeJS.Timeout|null>(null);
const [loadAllVendorsError, setLoadAllVendorsError] = useState<string|null>(null);
const handleLoadAllVendorsError = (error: string|null) => { /* ... */ };
const loadAllVendorsErrorTime: number = 6;
const timedLoadAllVendorsError = useCallback((error: string, seconds: number) => { /* ... */ }, []);

// 加载所有制造商
const [loadingAllManufacturers, setLoadingAllManufacturers] = useState<boolean>(true);
const loadAllManufacturersErrorTimeout = useRef<NodeJS.Timeout|null>(null);
const [loadAllManufacturersError, setLoadAllManufacturersError] = useState<string|null>(null);
const handleLoadAllManufacturersError = (error: string|null) => { /* ... */ };
const loadAllManufacturersErrorTime: number = 6;
const timedLoadAllManufacturersError = useCallback((error: string, seconds: number) => { /* ... */ }, []);

// 搜索部件
const [searching, setSearching] = useState<boolean>(false);
const searchErrorTimeout = useRef<NodeJS.Timeout|null>(null);
const [searchError, setSearchError] = useState<string|null>(null);
const handleSearchError = (error: string|null) => { /* ... */ };
const searchErrorTime: number = 6;
const timedSearchError = useCallback((error: string, seconds: number) => { /* ... */ }, []);

import { useState, useRef, useCallback, useEffect } from 'react';

interface AsyncOperationState {
  isLoading: boolean;
  error: string | null;
  setIsLoading: (loading: boolean) => void;
  handleError: (error: string | null) => void;
  setErrorWithTimeout: (error: string, seconds?: number) => void;
  clearError: () => void;
}

/**
 * 抽象异步操作的加载状态和错误处理逻辑。
 * @param initialLoadingState 初始加载状态，默认为 false。
 * @param defaultErrorDisplaySeconds 错误消息默认显示时长，默认为 5 秒。
 * @returns 包含加载状态、错误信息及相关操作函数的对象。
 */
export function useAsyncOperationState(
  initialLoadingState: boolean = false,
  defaultErrorDisplaySeconds: number = 5
): AsyncOperationState {
  const [isLoading, setIsLoading] = useState<boolean>(initialLoadingState);
  const [error, setError] = useState<string | null>(null);
  const errorTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // 清除错误消息
  const clearError = useCallback(() => {
    setError(null);
    if (errorTimeoutRef.current) {
      clearTimeout(errorTimeoutRef.current);
      errorTimeoutRef.current = null;
    }
  }, []);

  // 处理错误：设置错误消息并可选地记录
  const handleError = useCallback((err: string | null) => {
    if (err) {
      console.error("Operation Error:", err); // 可以在此处集成日志服务
      setError(err);
    } else {
      clearError();
    }
  }, [clearError]);

  // 设置错误消息并在指定时间后自动清除
  const setErrorWithTimeout = useCallback((
    err: string,
    seconds: number = defaultErrorDisplaySeconds
  ) => {
    handleError(err); // 先设置错误消息
    if (errorTimeoutRef.current) {
      clearTimeout(errorTimeoutRef.current); // 清除之前的定时器
    }
    errorTimeoutRef.current = setTimeout(() => {
      clearError(); // 指定时间后清除错误
    }, seconds * 1000);
  }, [handleError, clearError, defaultErrorDisplaySeconds]);

  // 组件卸载时清除任何待处理的定时器
  useEffect(() => {
    return () => {
      if (errorTimeoutRef.current) {
        clearTimeout(errorTimeoutRef.current);
      }
    };
  }, []);

  return {
    isLoading,
    error,
    setIsLoading,
    handleError,
    setErrorWithTimeout,
    clearError,
  };
}

import React from 'react';
import { useAsyncOperationState } from './useAsyncOperationState'; // 假设Hook文件路径

function MyComponent() {
  // 针对加载所有供应商
  const {
    isLoading: loadingAllVendors,
    error: loadAllVendorsError,
    setIsLoading: setLoadingAllVendors,
    setErrorWithTimeout: setTimedLoadAllVendorsError,
    handleError: handleLoadAllVendorsError // 如果需要即时设置错误且不带定时器
  } = useAsyncOperationState(true, 6); // 初始加载状态为true，默认错误显示6秒

  // 针对加载所有制造商
  const {
    isLoading: loadingAllManufacturers,
    error: loadAllManufacturersError,
    setIsLoading: setLoadingAllManufacturers,
    setErrorWithTimeout: setTimedLoadAllManufacturersError,
    handleError: handleLoadAllManufacturersError
  } = useAsyncOperationState(true, 6); // 初始加载状态为true，默认错误显示6秒

  // 针对搜索部件
  const {
    isLoading: searching,
    error: searchError,
    setIsLoading: setSearching,
    setErrorWithTimeout: setTimedSearchError,
    handleError: handleSearchError
  } = useAsyncOperationState(false, 6); // 初始加载状态为false，默认错误显示6秒

  // 模拟异步操作
  const fetchData = async (operationType: string) => {
    let setIsLoading, setTimedError;
    switch (operationType) {
      case 'vendors':
        setIsLoading = setLoadingAllVendors;
        setTimedError = setTimedLoadAllVendorsError;
        break;
      case 'manufacturers':
        setIsLoading = setLoadingAllManufacturers;
        setTimedError = setTimedLoadAllManufacturersError;
        break;
      case 'search':
        setIsLoading = setSearching;
        setTimedError = setTimedSearchError;
        break;
      default:
        return;
    }

    setIsLoading(true);
    try {
      // 模拟网络请求
      await new Promise(resolve => setTimeout(resolve, 1500));
      if (Math.random() > 0.7) { // 模拟请求失败
        throw new Error(`Failed to load ${operationType}`);
      }
      console.log(`${operationType} loaded successfully.`);
    } catch (err: any) {
      setTimedError(err.message, 10); // 错误消息显示10秒
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <h1>异步操作状态管理</h1>

      <section>
        <h2>供应商数据</h2>
        {loadingAllVendors && <p>正在加载供应商...</p>}
        {loadAllVendorsError && <p style={{ color: 'red' }}>错误: {loadAllVendorsError}</p>}
        <button onClick={() => fetchData('vendors')} disabled={loadingAllVendors}>
          {loadingAllVendors ? '加载中...' : '加载供应商'}
        </button>
      </section>

      <section>
        <h2>制造商数据</h2>
        {loadingAllManufacturers && <p>正在加载制造商...</p>}
        {loadAllManufacturersError && <p style={{ color: 'red' }}>错误: {loadAllManufacturersError}</p>}
        <button onClick={() => fetchData('manufacturers')} disabled={loadingAllManufacturers}>
          {loadingAllManufacturers ? '加载中...' : '加载制造商'}
        </button>
      </section>

      <section>
        <h2>搜索部件</h2>
        {searching && <p>正在搜索...</p>}
        {searchError && <p style={{ color: 'red' }}>错误: {searchError}</p>}
        <button onClick={() => fetchData('search')} disabled={searching}>
          {searching ? '搜索中...' : '搜索部件'}
        </button>
      </section>
    </div>
  );
}

export default MyComponent;