如何在Fetch请求失败时终止forEach循环？

你的代码里有两个核心问题导致没法终止循环：

1. forEach 本身不支持中断操作（哪怕是同步的forEach，你也没法用break终止，只能用return跳过当前迭代）；
2. 你在forEach里嵌套了异步的fetch请求，forEach会一次性触发所有迭代的请求，完全不会等待每个fetch完成，所以哪怕某个请求返回失败，后续的请求已经发出去了，自然没法终止循环。

正确的解决方案：用for...of + async/await #

for...of循环可以和async/await完美结合，让循环等待每个异步操作完成后再执行下一次迭代，这样我们就能在遇到无效URL时立即终止循环。

修改后的代码如下：

async function check(id) { 
  let validCount = 0;
  try {
    // 先获取版本数组
    const versionResponse = await fetch('https://ddragon.leagueoflegends.com/api/versions.json');
    const versions = await versionResponse.json();

    // 用for...of遍历，等待每个请求完成
    for (const version of versions) {
      const iconResponse = await fetch(`https://ddragon.leagueoflegends.com/cdn/${version}/img/profileicon/${id}.png`);
      
      if (iconResponse.ok) {
        validCount++;
      } else {
        // 遇到无效URL，立即终止循环
        break;
      }
    }
  } catch (error) {
    // 处理网络请求失败的情况（比如无网络、请求超时等）
    console.error('请求出错:', error);
  }
  // 可以返回有效的数量或者其他结果
  return validCount;
}

关键细节说明： #

• 把check函数声明为async，这样我们就能在函数内部使用await等待异步操作完成；
• 用try-catch包裹整个流程，处理网络层面的错误（比如fetch请求根本无法发送的情况）；
• for...of循环会等待每个await fetch完成后再进入下一次迭代，所以当遇到iconResponse.ok为false时，执行break就能立即终止循环，不会再发起后续的请求；
• 如果需要记录第一个无效版本的位置，你可以在循环里加上索引，比如for (const [index, version] of versions.entries())，然后在break时返回index。

如果你需要进一步调整逻辑（比如收集所有有效的版本，或者找到最后一个有效的版本），只需要修改循环内的处理逻辑即可。

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