JavaScript循环调用runPages拉取API全量用户数据异常排查

问题原因定位 #

1. checkPages函数Promise永久挂起：你在checkPages里只有当response.data.next_page != null时才调用resolve，最后一页接口返回的next_page为null时，Promise既不resolve也不reject，await语句会一直等待，导致函数卡死无法继续执行。
2. 数据处理逻辑判断错误：runPages函数里的判断条件写反了，你现在只有next_page存在时才处理当前页的results，会导致最后一页（next_page为null）的数据完全丢失，甚至第一页如果没有下一页的话连第一页数据都不会渲染。
3. 递归异步调用未加await：调用下一层runPages时没有加await，会导致异步执行顺序混乱，无法保证分页按顺序处理。
4. row变量复用问题：代码中没有看到row的初始化逻辑，如果是全局复用同一个row元素，会导致所有用户数据都被塞进同一行，渲染异常。
5. 冗余Promise封装：checkPages本身是async函数，不需要额外再套一层new Promise，属于不必要的冗余代码，还增加了出错概率。

修复后代码 #

// 先处理当前页数据，再判断是否有下一页
const runPages = async (values) => {
  // 先处理当前页的所有结果
  for (const field of values.results) {
    const row = document.createElement('tr'); // 每次新建行，不要复用全局row
    row.appendChild(addCell(field.name));
    row.appendChild(addCell(field.email));
    tblbody.appendChild(row);
  }
  // 有下一页则继续调用
  if (values.next_page != null) {
    const nextValues = await checkPages(values.next_page);
    await runPages(nextValues); // 递归调用加await保证顺序
  }
};

// 去掉冗余的Promise封装，直接返回接口结果
const checkPages = async (url) => {
  const Doorkey = { username: "XXX", password: "*****" };
  const response = await Axios.get(url, { auth: Doorkey });
  return response.data;
};

// 初始调用，替换为你第一次接口拿到的初始返回对象
runPages(initialValues);

额外注意点 #

• 请确保初始调用runPages时传入的initialValues包含第一页的results和next_page字段。
• 如果需要处理接口请求异常，可以在runPages外层加try catch统一捕获错误。

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