获取子分类时Promise解析异常且subs值为undefined的问题求助

嘿，我来帮你搞定这两个问题——subs变成undefined，还有“object is not iterable”的错误，本质都是对异步Promise的使用细节没把握到位，咱们一步步来：

问题1：getMainCategories返回undefined #

你在getMainCategories的第二个.then回调里，对categories做了排序和map处理，但没有把处理后的数组返回出去！回调函数默认返回undefined，所以整个Promise链最终给你的就是undefined。

问题2：“object is not iterable”错误 & subs未正确获取值 #

• 首先，getSubcategories本身是async函数，返回的是一个Promise，而Promise.all()需要接收可迭代的Promise集合（比如数组），你直接传单个Promise进去，自然会报错。
• 其次，就算你传对了，这里没有await这个Promise，subs会是一个Promise对象，直接拼到字符串里会显示[object Promise]，根本不是你要的子选项内容。

修复后的完整代码 #

let select = document.querySelector("#category");

async function getMainCategories() {
  const categoriesURL = "INSERT_URL/categories_main";
  const categories = await fetch(categoriesURL).then(response => response.json());
  
  // 排序主分类
  const sortedCategories = categories.sort((a, b) => {
    const nameA = a.title.toUpperCase();
    const nameB = b.title.toUpperCase();
    if (nameA < nameB) return -1;
    if (nameA > nameB) return 1;
    return 0;
  });
  
  // 用Promise.all等待所有子分类的异步请求完成
  return Promise.all(sortedCategories.map(async (cat) => {
    // 直接await单个子分类的Promise，不需要Promise.all（除非你要并行多个）
    const subs = await getSubcategories(cat.id);
    // 把子分类的选项字符串拼接进optgroup
    return `<optgroup label="${cat.title}">${subs.join('')}</optgroup>`;
  }));
}

async function getSubcategories(id) {
  const subcategoriesURL = "INSERT_URL/subcategories";
  const subcategories = await fetch(subcategoriesURL).then(response => response.json());
  
  return subcategories
    .sort((a, b) => {
      const nameA = a.title.toUpperCase();
      const nameB = b.title.toUpperCase();
      if (nameA < nameB) return -1;
      if (nameA > nameB) return 1;
      return 0;
    })
    .filter(subcategory => subcategory.categories_main_id === id)
    .map(sub => `<option value="${sub.id}">${sub.title}</option>`);
}

async function setHTML() {
  const categoryOptions = await getMainCategories();
  // 把所有optgroup字符串拼接起来
  select.innerHTML = "<option disabled selected>Select a category</option>" + categoryOptions.join('');
}

setHTML();

关键改动说明 #

1. 统一async/await写法：减少.then的嵌套，让异步逻辑更直观，避免回调里的返回值遗漏。
2. 修复返回值：getMainCategories里最终返回Promise.all(...)的结果，确保能拿到处理后的所有optgroup字符串数组。
3. 正确处理子分类异步请求：在map里用async函数，awaitgetSubcategories的结果，再把返回的子选项数组用join('')拼成字符串。
4. 去掉多余的Promise.all：因为getSubcategories只返回一个Promise（对应一次请求），直接await它就行，不需要用Promise.all（除非你要同时请求多个子分类接口，但这里是按主分类id逐个请求）。

额外提示 #

• 异步函数里，只要是Promise类型的值，都需要用await来获取实际结果，不然拿到的只是Promise对象。
• 当你需要等待多个异步操作完成时，才用Promise.all，并且要传一个Promise数组进去。
• 数组的map是同步方法，如果里面有异步操作，一定要用Promise.all包裹整个map，才能等待所有异步任务完成后拿到完整结果。

内容的提问来源于stack exchange，提问作者taNr leMn.