如何使用 ES6 获取 API

Question

我是 API 和 ES6 的新手。如果不正确，我将如何 post 用户名和密码并得到响应。顺便说一句，这个网站不工作。

    fetch('http://thisissamplewebsite.com', {
    method: 'post',
    body: JSON.stringify({
        email: document.getElementById('email').value
        answer: document.getElementById('answer').value
    })
});

<!DOCTYPE html>
<html>
<head>
    <title>Consume API</title>
</head>
<body>
<form method="POST">
<input type="email" id="email" placeholder="email"  value="aaa@yahoo.com"/>
<input type="password" id="password" placeholder="password"  value="12345"/>
<input type="submit" value="Submit">
</form>


</body>
</html>

Answer 1

您的代码中有一些错误：

您在 html 表单中拼写错误 method
您正在传递无效的 JSON 对象。您错过了对象之间的一个 ,。但是无论如何 document.getElementById('answer').value 你没有以 answer 作为其 id 的元素。
（你的截图不会起作用，因为你没有包含 fetch 库）
（删除代码段中 js 区域中的 <script> 标记。它们不是必需的）
该代码段也无法正常工作，因为 API URL 没有响应。

查看 fetch 的文档以获取更多信息。 fetch on github

fetch('http://thisissamplewebsite.com', {
    method: 'post',
    body: JSON.stringify({
        email: document.getElementById('email').value
        //answer: document.getElementById('answer').value
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Consume API</title>
</head>
<body>
<form method="POST">
<input type="email" id="email" placeholder="email"  value="aaa@yahoo.com"/>
<input type="password" id="password" placeholder="password"  value="12345"/>
<input type="submit" value="Submit">
</form>


</body>
</html>

Answer 2

服务器响应将 return 为 response.text()

fetch('http://example.com', {
  method: 'post',
  body: JSON.stringify({
    email: document.getElementById('email').value,
    password: document.getElementById('password').value
  }).then(function(response) {
    alert(response.text());
    //document.getElementById('answer').innerHTML = response.text();
  }, 
  function(error) {
    // handle network error
  })
});

如何使用 ES6 获取 API

How to Fetch API Using ES6

javascript

post

api-design

ecmascript-6