如何将异步方法结果显示到innerHTML？现有代码为何innerHTML为空？

错误原因 #

• 元素选择器错误：document.getElementById("#demo")写法有误，getElementById只需要传入纯ID字符串，不需要加CSS选择器的#前缀，导致找不到目标元素，无法设置innerHTML。
• JSON对象直接赋值问题：handlePress返回的是JSON对象，直接赋值给innerHTML会显示[object Object]，没法展示实际内容。
• 多余的this调用：loadData里的this.handlePress()属于冗余写法，直接调用handlePress()即可，这里的this指向全局window，虽不报错但不符合代码规范。

修正后的代码 #

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
async function handlePress(){
 const URL = "https://ewserver.di.unimi.it/mobicomp/treest/register.php"
 console.log("Sending request")
const c= await fetch(URL);
return await c.json(); 
}
function loadData(){
   handlePress().then(sids => {
    // 修正ID选择器，同时将JSON对象转为格式化字符串展示
    document.getElementById("demo").innerHTML = JSON.stringify(sids, null, 2);
  });
}
loadData()
</script>
</body>
</html>

额外优化建议 #

可以添加错误捕获逻辑，处理请求失败的场景：

function loadData(){
   handlePress()
   .then(sids => {
    document.getElementById("demo").innerHTML = JSON.stringify(sids, null, 2);
   })
   .catch(err => {
    document.getElementById("demo").innerHTML = `请求失败：${err.message}`;
    console.error(err);
   });
}

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