JavaScript中for循环被跳过/无法运行的问题排查

安全阿岳

2026-7-1

问题原因

你直接把fetchIngredients()的返回值传给了displayIngredients，但async函数执行后返回的是Promise对象，不是你期望的数组。Promise对象没有length属性，所以循环条件i < ingredients.length会变成i < undefined，直接不满足，循环就被跳过了。

解决方案

有两种常见的修正方式：

方式一：用await获取Promise结果

async function fetchIngredients() {
  let response = await fetch('/Ingredients/GetAll');
  let jsonResult = await response.json();

  console.log(jsonResult);
  return jsonResult;
}

// 用await获取实际的数组，需要放在async函数里执行
async function init() {
  let ingredients = await fetchIngredients();
  displayIngredients(ingredients);
}

async function displayIngredients(ingredients) {
  let ingredientsContainer = document.getElementById("ingredients-container");

  for (var i = 0; i < ingredients.length; i++) {
    // 这里写你的DOM操作逻辑，比如：
    let item = document.createElement('div');
    item.textContent = ingredients[i].Name; // 假设你的对象有Name属性
    ingredientsContainer.appendChild(item);
  }
}

// 初始化执行
init();

方式二：用.then链式调用

async function fetchIngredients() {
  let response = await fetch('/Ingredients/GetAll');
  let jsonResult = await response.json();

  console.log(jsonResult);
  return jsonResult;
}

async function displayIngredients(ingredients) {
  let ingredientsContainer = document.getElementById("ingredients-container");

  for (var i = 0; i < ingredients.length; i++) {
    // 这里写你的DOM操作逻辑
    let item = document.createElement('div');
    item.textContent = ingredients[i].Name;
    ingredientsContainer.appendChild(item);
  }
}

// 用.then获取Promise的结果后再调用displayIngredients
fetchIngredients().then(ingredients => {
  displayIngredients(ingredients);
});

关键说明