如何在TypeScript中异步遍历ids数组并批量获取数据？

核心思路 #

把单个id的查询逻辑封装成独立异步函数，再通过并行请求或顺序请求遍历所有ids，最终汇总符合GridModel格式的结果。

方案1：并行请求（推荐，效率更高） #

如果后端接口支持并发请求，用Promise.all批量处理所有id，一次性获取所有数据：

import { useState, useEffect } from 'react';
import { GridModel } from './your-types'; // 导入你的GridModel接口

// 封装单个id的查询与字段映射逻辑
const fetchSingleOrderData = async (id: string | number): Promise<GridModel> => {
  // 替换成你原有的单个id查询逻辑（比如调用后端API）
  const response = await fetch(`/api/purchase-orders/${id}`);
  const rawData = await response.json();
  
  // 按GridModel接口要求映射字段（复用你原有的填充逻辑）
  return {
    id: rawData.id,
    orderNumber: rawData.order_no,
    // 其他GridModel字段的映射逻辑...
  };
};

const useViewPurchaseOrderData = (ids: (string | number)[]) => {
  const [gridData, setGridData] = useState<GridModel[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchAllData = async () => {
      setLoading(true);
      setError(null);
      
      try {
        // 并行遍历所有ids，批量执行查询
        const allData = await Promise.all(
          ids.map(id => fetchSingleOrderData(id))
        );
        setGridData(allData);
      } catch (err) {
        setError(err instanceof Error ? err.message : '获取数据失败');
      } finally {
        setLoading(false);
      }
    };

    // 空数组时直接清空数据
    if (ids.length > 0) {
      fetchAllData();
    } else {
      setGridData([]);
      setLoading(false);
    }
  }, [ids]); // 依赖ids数组，变化时自动重新请求

  return { gridData, loading, error };
};

方案2：顺序请求（适合接口有并发限制的场景） #

如果后端限制并发请求数量，用for...of配合await逐个处理每个id：

import { useState, useEffect } from 'react';
import { GridModel } from './your-types';

const fetchSingleOrderData = async (id: string | number): Promise<GridModel> => {
  // 同方案1的单个id查询与映射逻辑
  const response = await fetch(`/api/purchase-orders/${id}`);
  const rawData = await response.json();
  
  return {
    id: rawData.id,
    orderNumber: rawData.order_no,
    // 其他字段映射...
  };
};

const useViewPurchaseOrderData = (ids: (string | number)[]) => {
  const [gridData, setGridData] = useState<GridModel[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchAllData = async () => {
      setLoading(true);
      setError(null);
      const tempData: GridModel[] = [];

      try {
        // 顺序遍历每个id，逐个发起请求
        for (const id of ids) {
          const singleData = await fetchSingleOrderData(id);
          tempData.push(singleData);
          // 可选：如果需要实时更新列表，可在此处执行setGridData([...tempData])
        }
        setGridData(tempData);
      } catch (err) {
        setError(err instanceof Error ? err.message : '获取数据失败');
      } finally {
        setLoading(false);
      }
    };

    if (ids.length > 0) {
      fetchAllData();
    } else {
      setGridData([]);
      setLoading(false);
    }
  }, [ids]);

  return { gridData, loading, error };
};

关键注意点 #

• 错误容错：若需要单个请求失败不影响整体，可在fetchSingleOrderData内单独捕获错误，返回null或默认值，最后在结果中过滤无效数据
• 类型安全：明确fetchSingleOrderData的返回类型为Promise<GridModel>，保证最终gridData严格符合接口要求
• 依赖管理：useEffect依赖数组包含ids，确保ids更新时自动触发重新请求

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