Question

我对Javascript刚起步，试图通过使用REST API消耗Fetch 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>

网页（屏幕截图）：

Answer 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>

Answer 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>

您输入了错误的语法

无法使用Fetch API显示承诺中的值

2 个答案: