Fetch API - 发送 GET 请求

Fetch API 提供了一个接口来异步管理传入和传出 Web 服务器的请求和响应。它提供了 fetch() 方法来异步获取资源或向服务器发送请求，而无需刷新网页。使用 fetch() 方法，我们可以执行各种请求，例如 POST、GET、PUT 和 DELETE。在本文中，我们将学习如何使用 Fetch API 发送 GET 请求。

发送 GET 请求

GET 请求是一个 HTTP 请求，用于从给定资源或 Web 服务器检索数据。在 Fetch API 中，我们可以通过在 fetch() 函数中指定方法类型来使用 GET 请求，也可以在 fetch() 函数中不指定任何方法类型来使用 GET 请求。

语法

fetch(URL, {method: "GET"})
.then(info =>{
   // Code
})
.catch(error =>{
   // catch error
});

在 fetch() 函数中，我们在方法类型中指定 GET 请求。

或者

fetch(URL)
.then(info =>{
   // Code
})
.catch(error =>{
   // catch error
});

这里，在 fetch() 函数中，我们没有指定任何方法类型，因为默认情况下 fetch() 函数使用 GET 请求。

示例

在下面的程序中，我们将从给定的 URL 检索 id 和标题并将它们显示在表格中。为此，我们定义了一个 fetch() 函数，其中包含检索数据的 URL 和 GET 请求。该函数将从给定的 URL 检索数据，然后使用 response.json() 函数将数据转换为 JSON 格式。之后，我们将在表中显示检索到的数据，即 id 和 title。

<!DOCTYPE html>
<html>
<body>
<script>
   // 使用 fetch() 函数获取 GET 请求
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Method Type
      method: "GET"})
   
   // 将接收到的数据转换为 JSON
   .then(response => response.json())
   .then(myData => {
      // 创建一个变量来存储数据
      let item = `<tr><th>Id</th><th>Title</th></tr>`;
   
      // 遍历每个条目并将它们添加到表中
      myData.forEach(users => {
         item += `<tr>
         <td>${users.id} </td>
         <td>${users.title}</td>        
         </tr>`;
      });
      // Display output
      document.getElementById("manager").innerHTML = item;
   });
</script>
<h2>Display Data</h2>
<div>
   <!-- Displaying retrevie data-->
   <table id = "manager"></table>
</div>
</body>
</html>