无法使用 Fetch API 显示来自承诺的值 [关闭]答案

【问题标题】：Not able to display values from a promise using Fetch API [closed]无法使用 Fetch API 显示来自承诺的值 [关闭]
【发布时间】：2019-10-20 00:58:02
【问题描述】：

我对@987654323@ 世界很陌生，并试图通过使用Fetch API 使用REST API 来运行一个简单的程序。

我的HTML 文件有一个按钮，点击它会点击REST API 并在页面上显示值。

问题是这些值没有显示在页面上。请指导。

home.html

<html>
        <head>
            <title>Fetch API Demo</title>
        </head>
        <body>
            <h1>Config files</h1>
            <button onclick="showUser();">Show user</button>
        </body>
        <script>
            function showUser() {
                fetch('https://jsonplaceholder.typicode.com/users/1')
                    .then(function (response) {
                        console.log('status: ${response.status}');
                        console.dir(response.body);
                        return response.json(); // the important line
                    })
                    .then(function (myJson) {
                        document.write('User: ${myJson.name} <br/> Email: ${myJson.email} <br/> Website: ${myJson.website}');
                        return myJson;
                    })
                    .then(console.log);
            }
        </script>
    </html>

网页（截图）：

【问题讨论】：

标签： javascript ajax promise fetch fetch-api

【解决方案1】：

您提供了无效的模板字符串，模板字符串以 `（反引号）开头和结尾。

<html>

<head>
  <title>Fetch API Demo</title>
</head>

<body>
  <h1>Config files</h1>
  <button onclick="showUser();">Show user</button>
</body>
<script>
  function showUser() {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(function(response) {
        console.log('status: ${response.status}');
        console.dir(response.body);
        return response.json(); // the important line
      })
      .then(function(myJson) {
        document.write(`User: ${myJson.name} <br/> Email: ${myJson.email} <br/> Website: ${myJson.website}`);
        return myJson;
      })
      .then(console.log)
      .catch(err => {});
  }
</script>

</html>

【讨论】：

感谢库纳尔，这很有效。不得不更改 IntelliJ 设置以使用 ECMA 6 脚本，我猜，默认情况下它使用 ECMA 5 脚本。

【解决方案2】：

<html>
    <head>
        <title>Fetch API Demo</title>
    </head>
    <body>
        <h1>Config files</h1>
        <button onclick="showUser();">Show user</button>
    </body>
    <script>
        function showUser() {
            fetch('https://jsonplaceholder.typicode.com/users/1')
                .then(function (response) {
                    console.log('status: ${response.status}');
                    console.dir(response.body);
                    return response.json(); // the important line
                })
                .then(function (myJson) {
                    document.write('User: ',myJson.name,' <br/> Email:', myJson.email,' <br/> Website: ',myJson.website,'');
                    return myJson;
                })
                .then(console.log);
        }
    </script>
</html>

你给出了错误的语法

【讨论】：