JavaScript中无法迭代fetch请求返回的Promise内的值问题咨询

所有被async关键字标记的函数执行后默认返回Promise实例，未添加await直接调用getItems(url)时，赋值给items变量的是Promise对象而非接口返回的实际数组，因此无法读取length属性执行遍历操作。

方案1：使用await调用（推荐） #

注意await只能在被async标记的函数内部使用，示例代码如下：

// 外层函数必须添加async标记
async function renderSelectOptions() {
  const items = await getItems(url);
  let html = '';
  for (let i = 0; i < items.length; i++){
    html += `<option value="${items[i].id}">${items[i].name}</option>`
  }
  // 替换为你实际的下拉选择器DOM节点选择器
  document.querySelector('select').innerHTML = html;
}
// 执行渲染函数
renderSelectOptions();

方案2：使用.then链式调用 #

无需修改外层函数的async标记，直接通过Promise的then方法获取返回值：

getItems(url).then(items => {
  let html = '';
  for (let i = 0; i < items.length; i++){
    html += `<option value="${items[i].id}">${items[i].name}</option>`
  }
  document.querySelector('select').innerHTML = html;
})

你当前的getItems函数已经使用了await语法，无需再嵌套.then链式调用，可简化为如下写法，同时建议补充错误返回逻辑避免后续遍历报错：

async function getItems(url){
  try {
    const response = await fetch(url, {
      method: 'GET',
      cache: 'no-cache',
      headers: {
        'Content-Type': 'application/json',
      }
    });
    return await response.json();
  } catch(e) {
    console.error('接口请求失败：', e);
    // 出错时返回空数组，避免后续读取length属性报错
    return [];
  }
}

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