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>
输出
结论
这就是我们如何使用 Fetch API 发送 GET 请求,以便我们可以从给定的 URL 请求特定的资源或文档。 使用 fetch() 函数,我们还可以根据我们的要求自定义 GET 请求。 现在,在下一篇文章中,我们将学习如何发送 POST 请求。