使用 Fetch API 进行网络请求

Fetch API 是现代浏览器中用于在网页中执行网络请求的一种原生方式。它提供了一个更强大、更灵活的接口来与服务器进行交互。以下是使用 Fetch API 进行网络请求的一些基本步骤和示例。

1. 创建 Fetch 请求

Fetch API 允许你以编程方式发起 HTTP 请求。以下是一个基本的请求示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中，我们向 https://api.example.com/data 发起了一个 GET 请求，并处理了响应数据。

2. 处理响应

Fetch API 返回一个 Promise 对象，该对象在请求成功时解析为一个 Response 对象。你可以使用 .json() 方法来解析 JSON 响应体。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在上面的代码中，我们使用 .json() 方法将响应体解析为 JSON 格式，然后将其打印到控制台。

3. 处理错误

Fetch API 在遇到错误时将抛出一个异常。你可以使用 .catch() 方法来捕获和处理这些错误。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中，如果请求失败或响应无法解析为 JSON，我们将错误打印到控制台。

4. 附加请求头

有时你可能需要向请求中添加自定义头信息。你可以使用 .headers.append() 方法来实现这一点。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个示例中，我们向请求中添加了 Content-Type 头信息，并将请求体设置为 JSON 格式。

5. 更多资源

想要了解更多关于 Fetch API 的信息，可以访问以下链接：

• Fetch API 文档

Fetch API 示例图片