React中如何基于campaignid动态调用Fetch API？

核心思路 #

先获取初始数据集，提取所有campaignid（建议去重避免重复请求），再通过Promise.all并行调用每个campaignid对应的API，最后收集所有返回结果。

完整代码实现 #

import { useState, useEffect } from "react";

const initialUrl = "https://6271dd6bc455a64564b8b6b6.mockapi.io/AP1/REST/Numberofsubmissons";
// 替换为你的campaign详情API模板
const campaignDetailUrlTemplate = "https://your-api-domain/campaigns/{id}";

export default function App() {
  const [initialData, setInitialData] = useState([]);
  const [campaignResults, setCampaignResults] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 定义单个campaign详情请求函数
    const fetchCampaignDetail = async (campaignId) => {
      try {
        const response = await fetch(campaignDetailUrlTemplate.replace("{id}", campaignId));
        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        return { id: campaignId, data: await response.json() };
      } catch (error) {
        // 捕获单个请求错误，避免影响其他请求
        return { id: campaignId, error: error.message };
      }
    };

    // 初始数据请求 + 批量campaign请求
    const fetchAllData = async () => {
      setIsLoading(true);
      try {
        // 1. 获取初始数据
        const initialResponse = await fetch(initialUrl);
        if (!initialResponse.ok) throw new Error(`初始数据请求失败：${initialResponse.status}`);
        const data = await initialResponse.json();
        setInitialData(data);

        // 2. 提取并去重campaignid
        const uniqueCampaignIds = [...new Set(data.map(item => item.campaignid))];
        if (uniqueCampaignIds.length === 0) return;

        // 3. 并行请求所有campaign详情
        const results = await Promise.all(uniqueCampaignIds.map(fetchCampaignDetail));
        setCampaignResults(results);
      } catch (error) {
        console.error("整体请求流程出错：", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchAllData();
  }, []);

  return (
    <div>
      {isLoading ? (
        <p>加载中...</p>
      ) : (
        <>
          <h3>初始数据</h3>
          <code>{JSON.stringify(initialData)}</code>
          
          <h3>各Campaign详情</h3>
          {campaignResults.map(result => (
            <div key={result.id}>
              <p>Campaign ID: {result.id}</p>
              {result.error ? (
                <p style={{ color: "red" }}>错误：{result.error}</p>
              ) : (
                <code>{JSON.stringify(result.data)}</code>
              )}
            </div>
          ))}
        </>
      )}
    </div>
  );
}

关键细节说明 #

• 去重处理：用Set对campaignid去重，避免重复请求同一个ID的接口，减少不必要的网络开销。
• 并行请求：使用Promise.all同时发起所有campaign详情请求，相比串行请求大幅提升效率（无依赖关系的场景优先用并行）。
• 错误隔离：单个campaign请求失败时，通过try/catch捕获错误并返回错误信息，不会导致整个批量请求失败。
• 加载状态：新增isLoading状态，给用户明确的加载反馈。

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