JavaScript中Fetch函数无法返回字符串至HTML标签的问题

为什么返回值会显示[object Promise] #

norrisRandom是async函数，这类函数的返回值永远是一个Promise对象，而非你期望的笑话字符串。直接把Promise对象赋值给innerHTML，浏览器会将其转为字符串，就出现了[object Promise]。

第一个可行的代码里，是在fetch的.then()回调中直接操作DOM——这时候已经等待请求完成，拿到了实际的data.value（笑话字符串），所以能正常展示。

实现“调用一次函数，在多个区域展示”的正确写法 #

利用await获取Promise的最终结果（事件监听函数已标记为async，可直接用await），拿到笑话字符串后批量更新多个DOM元素：

document.querySelector('#bt_funFact').addEventListener('click', async () => {
  // 等待Promise完成，拿到实际的笑话字符串
  const joke = await norrisRandom();
  // 同时更新多个展示区域
  document.getElementById('funFact').innerHTML = joke;
  document.getElementById('funFact2').innerHTML = joke;
  // 可继续添加更多需要展示的元素
})

async function norrisRandom() {
  // 用await简化Promise链，代码更清晰
  const response = await fetch('https://api.chucknorris.io/jokes/random');
  const data = await response.json();
  return data.value;
}

如果你习惯用.then()的写法，也可以这么写：

document.querySelector('#bt_funFact').addEventListener('click', () => {
  norrisRandom().then(joke => {
    document.getElementById('funFact').innerHTML = joke;
    document.getElementById('funFact2').innerHTML = joke;
  })
})

async function norrisRandom() {
  const response = await fetch('https://api.chucknorris.io/jokes/random');
  const data = await response.json();
  return data.value;
}

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