Question

使用Javascript在HTML页面中显示字符串变量很容易：

<html>
<body>

<script>
text = "hello"
document.getElementById("demo").innerHTML = text
</script>

<p id="demo"></p>

</body>
</html>

但是，我想用本地文件（例如file.txt）的内容替换“ hello”。我认为应该使用Javascript的fetch() API轻松完成此操作，但是我遇到了问题。这个

<html>
<body>

<p id="demo"></p>

<script>
text = fetch('file.txt').then(response => response.text())
document.getElementById("demo").innerHTML = text
</script> 

</body>
</html>

将显示[object Promise]。我想我必须以某种方式访问response对象，但我不知道该怎么做。

Answer 1

代码中的

text是一个承诺，而不是文本。您需要使用promise回调：

fetch('file.txt')
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.text();
})
.then(text => {
    document.getElementById("demo").innerHTML = text;
})
.catch(error => {
    // Handle/report error
});

Answer 2

问题是您正在document.getElementById("demo").innerHTML = text之前解决了问题，并且您已经输入了文字。尝试做

text = fetch('file.txt').then(response => {
   document.getElementById("demo").innerHTML = response.text()
})

Answer 3

response.text()也返回一个承诺。因此，您必须添加另一个然后才能获取文本。

response.text().then(function (text) {
  // do something with the text response 
});

使用`fetch（）`在网页中显示纯文本

3 个答案: