HTML 页面从 API 响应返回未定义答案

【问题标题】：HTML page returns Undefined from API responseHTML 页面从 API 响应返回未定义
【发布时间】：2022-08-17 23:26:21
【问题描述】：

我有以下 JS 试图从 AWS API 网关返回一个值：

 <script>
        fetch(\"https://myapi/get\")
        .then(response => response.json())
        .then(data => {
        document.getElementById(\"website-counter\").innerHTML = data.body
        });
 </script>

API GW 触发 lambda 函数以从 DynamoDB 表中获取值。我试图通过显示返回值

<p>
   CV Website Views: <span id=\"website-counter\"></span><br/>
                
</p>

但是，\"website-counter\" 返回一个未定义的值，而不是所需的 DB 值。

另外，我在 Lambda 函数本身中设置了 CORS 标头。如果我从 AWS 控制台访问 API 的直接链接，我会按预期从 dynamodb 获得返回值。

确保在关闭 body 标记之前放置了脚本标记。（接近文件末尾）
脚本标签已经在结束正文标签之前，谢谢
问题中没有足够的信息来确定为什么 data.body 未定义。您没有提供 API 的代码，也没有提供 data 实际内容的日志。

标签： javascript html amazon-web-services rest

【解决方案1】：

这篇文章为我解决了这个问题：ES6 fetch function returns undefined

现在工作正常：

     <script type ="text/javascript">
            function visitcount() {
                return fetch("https://myapi/get").then(function(response) {
                return response.json();
                }).then(function(json) {
                    return json;
                });
                                }

                visitcount().then(function(result) {
                document.getElementById("website-counter").innerHTML = result
                console.log(result);
                });
        
    </script>

【讨论】：

这有一个很多完全多余的变化。看起来您的问题的根本原因是您的 API没有返回一个 JSON 文本，上面有一个名为 body 的属性。（这是我可以看到的与您的原始代码之间的唯一重大变化）这是一种通常没有用的微不足道的错误，因此您最好还是删除问题。