JavaScript 如何使用Fetch API获取数据

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

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

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

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

语法：

fetch(URL, options)

参数： 此方法接受以下两个参数，并按照以下方式进行描述：

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

示例1： GET请求演示。

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

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

{page: 1, per_page: 6, total: 12, total_pages: 2, data: Array(6), …}
data
:(6) [{…}, {…}, {…}, {…}, {…}, {…}]
page
:1
per_page
:6
support
:{url: 
'https://reqres.in/#support-heading', text: 'To keep ReqRes free, 
    contributions towards server costs are appreciated!'}
total
:12
total_pages
:2
[[Prototype]]
:Object

示例2： POST请求演示。我们将通过自己的努力使用POST方法发布一些随机数据。

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

{name: 
'Geeks For Geeks', website: 'https://www.geeksforgeeks.org/', 
id: '96', 
createdAt: '2023-01-11T06:53:03.680Z'}