Fetch API - 发送 GET 请求

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

发送 GET 请求

GET 请求是用于从给定资源或 Web 服务器检索数据的 HTTP 请求。在 Fetch API 中，我们可以通过在 fetch（）函数中指定方法类型或不在 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 和 titles 并将其显示在表中。因此，为此，我们定义了一个 fetch（）函数，其中包含一个 URL，我们从中检索数据和一个 GET 请求。此函数将从给定的 URL 中检索数据，然后使用 response.json（）函数将数据转换为 JSON 格式。之后，我们将在表中显示检索到的数据，即 id 和 title。


<!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 请求。

打印本页