Fetch API - 发送 GET 请求

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

发送 GET 请求

GET 请求是一种 HTTP 请求，用于从给定资源或 Web 服务器检索数据。在 Fetch API 中，我们可以通过在 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 和标题，并在表格中显示它们。因此，为此，我们定义了一个带 URL 的 fetch() 函数，从中我们检索数据和 GET 请求。此函数将从给定的 URL 中检索数据，然后使用 response.json() 函数将数据转换为 JSON 格式。之后，我们将在表格中显示检索到的数据，即 id 和标题。

<!DOCTYPE html>
<html>
<body>
<script>
   // GET request using fetch()function
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Method Type
      method: "GET"})
   
   // Converting received data to JSON
   .then(response => response.json())
   .then(myData => {
      // Create a variable to store data
      let item = `<tr><th>Id</th><th>Title</th></tr>`;
   
      // Iterate through each entry and add them to the table 
      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>

输出

结论

这就是我们如何使用 Fetch API 发送 GET 请求，以便我们可以从给定的 URL 请求特定资源或文档。使用 fetch() 函数，我们还可以根据我们的需求自定义 GET 请求。现在，在下一篇文章中，我们将学习如何发送 POST 请求。

打印页面