如何在 HTML 中调用 REST API [关闭]答案

【问题标题】：How to call REST API in HTML [closed]如何在 HTML 中调用 REST API [关闭]
【发布时间】：2019-07-03 03:31:54
【问题描述】：

API Noob 在这里，我很难弄清楚 API 和 google 教程让我觉得它们比我认为的要先进得多。这是我想要做的：

创建一个简单的网页，让我可以搜索位于此 pokemon API 的信息：https://pokeapi.co/

谁能帮我弄清楚如何编写一个函数来使它工作？

<!DOCTYPE html>
<html>
<body>

<h1>PokeMon Search API</h1>

<script>//javascript function here?</script>
 
  <input id="text" type="text" value="" style="Width:20%"/> 
  <button>Find PokeMon By Name</button>

<p>Results</p>   
  <div v-html="link.FUNCTIONVARIABLE"></div>

</body>
</html>

感谢您的帮助！

【问题讨论】：

嗨。欢迎来到 SO。这个问题太笼统了。我们希望看到您尝试过的可能遇到问题的代码，而不是要求我们编写所有内容的问题。但是，查看documentation（在继续之前您应该这样做），您可以使用this library to help you。这应该会让事情变得更容易。
How to call a REST web service API from JavaScript?的可能重复

标签： javascript html database rest api

【解决方案1】：

你在这里需要一些 Javascript。像这样的东西应该可以工作：

<script type="text/javascript">
    var apiUrl = 'https://pokeapi.co/api/v2/pokemon/ditto/';
    fetch(apiUrl).then(response => {
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);
    }).catch(err => {
      // Do something for an error here
    });
</script>

这段代码使用 fetch 函数（更多信息here）向 apiUrl 变量中包含的 url 发出 GET 请求。您可能希望使用 HTML 输入标签来使 Pokemon 名称动态化。

【讨论】：

您应该添加一些解释或文档链接，而不是转储代码作为您的答案。 OP 可能不明白 fetch 是什么，或者 promise 是什么以及它们是如何工作的。