如何通过Async/Await等待所有递归API调用完成获取分页端点全量ID

问题场景 #

需要调用分页接口拉取全量条目的ID，目标是等所有分页接口全部返回后，汇总得到完整的ID集合。但现有代码执行后，往往在第一页接口返回时就提前终止逻辑，最终拿到的结果夹杂未解析的Promise，根本没等后续分页请求跑完。

现有问题代码 #

const getSelectAllIds = async (url) => {
  let response = await axios.post(url);
  if (response.status === 200 && response.data.next != null) {
    console.log(`calling: ${response.config.url}`);
    return [
      ...response.data.results,
      await getSelectAllIds(response.data.next)
    ];
  }
};

const someFunction = async (url, data) => {
  const selectedIds = await getSelectAllIds(url);
  return selectedIds;
};

核心问题原因 #

• 递归走到最后一页就断片：当接口返回最后一页（response.data.next为null）时，代码不会进入if判断分支，函数没有任何返回值，直接给出undefined，递归链路直接中断
• 结果结构套娃：原实现把递归返回的数组直接塞进外层数组，没有做展开合并，最终拿到的是多层嵌套的非预期结构，根本不是平铺的ID列表
• 异步等待没兜住：因为递归兜底返回缺失，外层await拿到的其实是第一页结果拼接了没跑完的递归Promise，无法等全部分页请求执行完成

修复后的正确实现 #

核心思路是给递归逻辑补全所有分支的返回值，统一把每页结果合并成扁平数组，确保所有异步调用都被正常等待。

const getSelectAllIds = async (url) => {
  const response = await axios.post(url);
  // 非200状态直接抛错，避免错误被静默吞掉
  if (response.status !== 200) throw new Error('分页接口请求失败');
  
  const currentPageResults = response.data.results;
  // 没有下一页时直接返回当前页结果，作为递归终止的兜底
  if (!response.data.next) return currentPageResults;
  
  console.log(`calling: ${response.config.url}`);
  // 等待下一页全量结果拉取完成后，和当前页结果合并为扁平数组
  const nextPageAllResults = await getSelectAllIds(response.data.next);
  return [...currentPageResults, ...nextPageAllResults];
};

const someFunction = async (url) => {
  // 此处拿到的selectedIds是全部分页结果合并后的完整扁平数组，无未解析的Promise
  const selectedIds = await getSelectAllIds(url);
  return selectedIds;
};

关键注意点 #

• 递归异步函数必须在所有逻辑分支都有明确返回值，否则会出现异步结果为undefined的问题
• 合并分页结果时要对递归返回的数组做展开操作，避免最终结果出现多层嵌套
• 如果分页接口有频控限制，可在递归调用前加适当延时，避免短时间连续请求触发接口拦截

内容的提问来源于stack exchange，提问作者Kyle Calica-St