React Native中如何在循环调用API时每次请求后等待5秒？

你的问题核心在于forEach循环对异步函数的处理逻辑——forEach不会等待内部的异步操作执行完成，导致所有sleep(5000)几乎同时开始计时，最终API请求还是扎堆发送，触发了频率限制。

修复方案：改用for...of控制异步流程 #

通过扁平化数据结构+for...of循环，确保每次请求间隔5秒再发起下一个：

function Overview() {
  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  async function fetchETFData(symbol) {
    try {
      const response = await fetch(`URL_API${symbol}`);
      const testData = await response.json();
      console.log(testData);
    } catch (error) {
      console.error(error);
    }
  }

  async function userData() {
    try {
      const response = await fetch("URL_Database");
      const userDataFetch = await response.json();

      // 先把所有需要请求的symbol整理到一维数组
      const allSymbols = [];
      for (const key in userDataFetch) {
        userDataFetch[key].forEach(element => {
          allSymbols.push(element.symbol);
        });
      }

      // 用for...of逐个发起请求，保证间隔时间
      for (let i = 0; i < allSymbols.length; i++) {
        const symbol = allSymbols[i];
        await fetchETFData(symbol);
        // 最后一个请求无需额外等待
        if (i !== allSymbols.length - 1) {
          await sleep(5000);
        }
      }
    } catch (error) {
      console.error(error);
    }
  }

  userData();

  return (
    <View> {/* React Native需用View替代div */}
      <Button
        onPress={ShareOfPositions}
        title="Calculate Shares"
        color="#841584"
        accessibilityLabel="Learn more about this purple button"
      />
    </View>
  );
}

关键改动说明： #

• 扁平化数据：把嵌套结构中的symbol提取到一维数组，简化异步遍历逻辑
• for...of循环：会等待内部异步操作完成后再进入下一次迭代，严格保证请求间隔
• 优化等待逻辑：仅在请求之间添加延迟，最后一次请求结束后无需多余等待
• 适配React Native：将div替换为View，符合RN组件规范

如果需要给用户反馈加载状态，可以在循环过程中更新组件状态，显示当前请求进度或加载提示。

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