JS fetch回调中for循环仅执行i=0单次迭代问题排查

核心原因很明确：同步执行的for循环中途停止，一定是遇到了未捕获的运行时错误，直接终止了当前回调上下文的执行。 #

前提说明 #

先明确两个容易被忽略的点：

• 你写的Promise链有缺陷：.catch()放在了res.json()后面，只能捕获网络请求、JSON解析阶段的错误，后面处理response的回调里抛出的任何错误，都不会被这个catch捕获，会直接抛到全局终止执行。
• 你调用的jsonplaceholder posts接口默认返回100条数据，其中索引0-9的项userId均为1，userId=2的项从索引10才开始。你外层循环写死了i<10，正常来说判断条件为userId==2时，if块在0-9次迭代中根本不会触发，循环应该完整跑完10次才对。

具体触发场景 #

结合你的描述，错误基本是以下三种情况之一：

• 实际运行代码和贴出的复现代码不一致
  改判断条件时误删了for循环或if块的大括号，导致DOM操作逻辑跑到了if块外面，i=0迭代时就执行到了document.getElementById的逻辑。如果页面上不存在id为res或resi的元素，getElementById会返回null，访问null.innerHTML会直接抛出Cannot set properties of null错误，直接终止执行。
• 循环上限实际大于10
  如果你实际写的循环上限是i<20甚至更大，i迭代到10时第一次满足userId==2的条件，进入j循环后执行DOM操作时因为找不到元素抛错。你误以为循环只跑了i=0，实际上是i=0到9因为不满足if条件，你忽略了对应的日志，直到i=10进if块后抛错终止。
• 接口返回数组长度不足
  如果请求被浏览器插件拦截、或者加了额外查询参数导致接口返回的数组长度小于10，i=0迭代完成后自增到1，访问response[1].userId时因为response[1]是undefined，会抛出Cannot read properties of undefined (reading 'userId')错误终止循环。
  这种情况在判断条件为userId==1时不会暴露：i=0进入if块后，j循环在访问超出数组长度的索引之前，就刚好命中了id==4的项完成DOM操作，你会误以为逻辑正常，实际上j循环也会在后续访问不存在的索引时抛错。

修复方案 #

1. 先打开浏览器控制台的「错误」面板，直接看抛出的具体错误信息和对应行号，这是最快的定位方式。
2. 调整Promise链的catch位置，把catch放到链尾捕获所有阶段的错误，同时补充HTTP状态校验：

function request(){
  const k=4;
  fetch('https://jsonplaceholder.typicode.com/posts', { method: 'GET' })
    .then(res => {
      if (!res.ok) throw new Error(`HTTP错误，状态码：${res.status}`);
      return res.json();
    })
    .then(response => {
      console.log("entered then");
      // 提前获取DOM元素，不要在循环里反复查询，同时做存在性校验
      const resEl = document.getElementById("res");
      const resiEl = document.getElementById("resi");
      if (!resEl || !resiEl) throw new Error("页面缺少res或resi元素");

      // 循环变量用let声明块级作用域变量，避免var的变量污染问题
      // 循环上限不要写死，同时判断不超过数组长度，避免越界访问
      for(let i=0; i<Math.min(10, response.length); i++){
        console.log("entered for loop with i =", i);
        if (response[i].userId === 2) {
          console.log("entered if cond");
          for(let j=0; j<Math.min(10, response.length); j++){
            console.log("entered for loop with j =", j);
            if (response[j].id === k) {
              console.log("entered if cond");
              resEl.innerHTML = response[i].userId;
              resiEl.innerHTML = response[j].id;
            }
          }
        }
      }
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

request();

3. 循环变量统一用let声明，不要用函数级的var，避免变量提升、全局污染导致的意外问题。

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