JavaScript使用Fetch API获取数据后无法渲染列表到HTML的问题

代码无法正常渲染列表有两个核心错误：

• Array.prototype.forEach 没有返回值，执行后固定返回undefined，你将其放在模板字符串中插值，最终只会向ul中插入undefined，无法生成有效的列表项。
• 你尝试拼接<li>${element}</li>的逻辑没有放在正确的遍历流程中完成字符串组装，导致语法报错。

直接将遍历逻辑替换为map生成li标签数组，再通过join('')拼接为完整HTML字符串赋值即可，HTML结构无需修改，修正后的JS代码如下：

const url1 = "https://jsonplaceholder.typicode.com/users/1"
const url2 = "https://jsonplaceholder.typicode.com/users/2"
const url3 = "https://jsonplaceholder.typicode.com/users/3"
const fData = document.getElementById('fData')

async function fetchApis() {
  const results = await Promise.all([fetch(url1), fetch(url2), fetch(url3)])
  const responseAll = results.map(result => result.json())
  const finalData = await Promise.all(responseAll)
  // 遍历生成li标签数组后拼接为完整HTML字符串
  fData.innerHTML = finalData.map(user => `<li>${user.name}</li>`).join('')
}
fetchApis()

对应的HTML结构保持不变：

<ul id="fData"></ul>

• 如果你习惯使用forEach，也可以提前声明空字符串变量，在遍历过程中逐次拼接列表项，只是写法相对繁琐：

let listHtml = ''
finalData.forEach(user => {
  listHtml += `<li>${user.name}</li>`
})
fData.innerHTML = listHtml

• 注意不要漏写join('')：如果直接把map返回的数组赋值给innerHTML，数组转字符串时会自动用逗号分隔每一项，页面上列表项之间会多出多余的逗号。

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