获取 api 返回 `function text() { [native code] }` [关闭]答案

【问题标题】：fetch api returns `function text() { [native code] }` [closed]获取 api 返回 `function text() { [native code] }` [关闭]
【发布时间】：2020-05-03 01:24:45
【问题描述】：

我是 fetch api 的新手，我遇到了一个小问题。

document.getElementById('getText').addEventListener('click',function(){
    fetch('text.txt')
        .then(function(res){
            return res.text
        }).then(function(data){
            document.body.innerHTML += `<br><br>${data}`
        })
        .catch(function(err){
            console.log(err)
        })
})

这是我的代码。它返回这个： function text() { [native code] } 我希望它返回内容而不是这个。我不知道我该怎么办！？抱歉问了一个愚蠢的问题。谢谢

【问题讨论】：

.text是一个函数，不是普通的属性，你必须调用它

标签： javascript html promise fetch-api

【解决方案1】：

主要问题是text 是一个函数，你需要调用它，而不仅仅是返回它：

return res.text();
// −−−−−−−−−−−−^^

其他几个建议：

1。在调用它之前检查ok（除非你想要错误页面的text），这要归功于fetch API 中的一个footgun，我描述了here。

2。我强烈建议不要将+= 与innerHTML 一起使用。当你这样做时，浏览器必须这样做：

循环遍历使用innerHTML 的容器中的所有元素（在本例中为整个document.body）并创建一个HTML 字符串来表示它们。
将您的字符串添加到第 1 步中字符串的末尾
销毁容器中的所有现有元素
解析第 2 步中的字符串，创建新元素
将这些元素放入容器中

在此过程中，它会销毁现有内容上的所有事件处理程序。

改为使用insertAdjacentHTML:

document.body.insertAdjacentHTML("beforeend", `<br><br>${data}`)

3。最后，为承诺结算处理程序使用箭头函数会使事情变得更简洁（但这完全取决于您）。

将所有这些放在一起：

document.getElementById('getText').addEventListener('click', function() {
    fetch('text.txt')
        .then((res) => {
            if (!res.ok) {
                throw new Error("HTTP error " + res.status)
            }
            return res.text();
        })
        .then((data) => {
            document.body.innerHTML += `<br><br>${data}`;
        })
        .catch((err) => {
            console.log(err);
        });
});

【讨论】：