如何用React Hooks批量调用不定数量API并优化代码？

要解决这个问题，核心思路是避开在循环中调用React Hook，转而在自定义Hook内部通过useEffect结合Promise批量处理API请求，同时统一管理加载、错误状态，最终返回结构化的数据。

1. 封装批量API请求Hook #

我们可以自己实现一个useBatchApiGet Hook，它接收API配置数组，内部直接处理请求逻辑，而不是循环调用useApiGet：

import { useState, useEffect } from 'react';

// 基于fetch实现批量请求逻辑（可复用你现有useApiGet的鉴权、响应处理等逻辑）
function useBatchApiGet(apiConfigs) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState({});
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchAllApis = async () => {
      setLoading(true);
      setError(null);

      try {
        // 遍历配置数组，发起所有请求
        const requests = apiConfigs.map(async ({ name, endpoint }) => {
          const res = await fetch(endpoint, { signal });
          if (!res.ok) throw new Error(`请求${name}失败: ${res.statusText}`);
          const responseData = await res.json();
          return { name, data: responseData };
        });

        // 等待所有请求完成，整理成key-value格式
        const results = await Promise.all(requests);
        const resultData = results.reduce((acc, { name, data }) => {
          acc[name] = data;
          return acc;
        }, {});
        setData(resultData);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchAllApis();

    // 组件卸载时取消未完成的请求
    return () => abortController.abort();
  }, [apiConfigs]);

  return { loading, data, error };
}

如果你的useApiGet已经封装了鉴权、请求头等逻辑，不想重复编写，可以把单个请求逻辑抽成独立函数，在批量Hook里调用：

// 抽离单个API请求逻辑（复用useApiGet的核心逻辑）
const fetchSingleApi = async (endpoint, signal) => {
  // 这里直接复用你useApiGet里的请求代码，比如携带token、统一响应处理等
  const res = await fetch(endpoint, { signal });
  if (!res.ok) throw new Error(`请求失败: ${res.statusText}`);
  return res.json();
};

// 批量Hook中调用抽离的请求函数
function useBatchApiGet(apiConfigs) {
  // ... 状态管理逻辑和之前一致
  const fetchAllApis = async () => {
    // ...
    const requests = apiConfigs.map(async ({ name, endpoint }) => {
      const responseData = await fetchSingleApi(endpoint, signal);
      return { name, data: responseData };
    });
    // ...
  };
  // ...
}

2. 组件中使用示例 #

在组件里直接调用这个批量Hook，所有Hook调用都放在组件顶部，不会触发Hook顺序问题：

function MyComponent() {
  // 定义需要调用的API配置数组
  const apiConfigs = [
    { name: 'user', endpoint: '/api/user' },
    { name: 'posts', endpoint: '/api/posts' },
    { name: 'comments', endpoint: '/api/comments' },
  ];

  const { loading, data, error } = useBatchApiGet(apiConfigs);

  // 处理加载状态
  if (loading) return <div>加载中...</div>;

  // 统一错误处理
  if (error) {
    console.error(error);
    return <NotFound />;
  }

  // 直接通过name取用对应数据
  const { user, posts, comments } = data;

  return (
    <div>
      <h1>{user.name}</h1>
      <ul>
        {posts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

3. 额外优化点 #

• 单个请求错误隔离：如果需要精准知道哪个请求失败，可以用Promise.allSettled代替Promise.all，逐个判断请求状态，返回每个API的独立错误信息：

  const results = await Promise.allSettled(requests);
  const resultData = {};
  const errorMessages = [];
  results.forEach((result, index) => {
    const { name } = apiConfigs[index];
    if (result.status === 'fulfilled') {
      resultData[name] = result.value.data;
    } else {
      errorMessages.push(`${name}请求失败: ${result.reason.message}`);
    }
  });
  if (errorMessages.length > 0) setError(errorMessages.join('; '));
  

• 请求缓存：可以结合useMemo或第三方库（如SWR、React Query）实现请求结果缓存，避免重复发起相同请求。
• 动态配置支持：如果API配置是动态生成的，确保apiConfigs作为useEffect的依赖项，配置变化时自动重新发起请求。

内容的提问来源于stack exchange，提问作者wolf_math