如何使用 JavaScript Fetch API 获取数据？

Fetch API 提供了一个 JavaScript 接口，使用户能够操作和访问部分 HTTP 管道，例如响应和请求。

Fetch API 有许多丰富而令人兴奋的选项，例如方法、标头、正文、引用者、模式、凭据、缓存、重定向、完整性等等。然而，我们使用的最突出的是方法、标题和正文。

方法用于创建、读取、更新和删除数据，因此我们有 GET、POST、PUT 和 DELETE 等方法。

作为示例，我们将使用 API：https://reqres.in/arpi/users，它会为我们提供关于一个人的随机数据，我们的目标是查看这些数据中呈现的内容。

句法：

fetch(URL, options)

参数：此方法接受两个参数，如上所示，如下所述：

1. URL：这是您要从中获取数据的资源的端点。
2. 选项：这是一个可选参数，它是一个选项对象，可以有以下值：
   • Method：表示方法类型，可以是任何HTTP请求类型，如GET、POST、PUT、DELETE等。
   • Headers：如果我们向服务器传递数据，我们需要另外告诉 fetch 我们将以 json/text 等形式传递数据。
   • 正文：在这部分中，我们实际上将数据作为 JSON 传递。

示例 1： GET 请求演示。

Javascript

fetch("https://reqres.in/api/users")
.then(res => res.json())
.then(data => console.log(data))

输出：这是 API 返回给我们的内容，一些关于人的随机数据。

示例 2： POST 请求演示。现在，我们将在 POST 方法的帮助下自己发布一些随机数据。

Javascript

fetch("https://reqres.in/api/users", {
  // Defining method type as POST
  method: 'POST', 
  // Fetch knows, what type of data are we dealing with
  headers: {
    'Content-Type': 'application/json' 
  },
  // Data needs to be parsed into JSON
  body: JSON.stringify({ 
    name: 'Geeks For Geeks',
    website: 'https://www.geeksforgeeks.org/',
  })
}).then(res => {
  return res.json()
}).then(data => console.log(data));

输出：在这里，我们看到我们已经使用 fetch API 成功地发出了一个 POST 请求。