异步编程：使用 Fetch API 进行网络请求¶

在现代 Web 开发中，异步编程是一个非常重要的概念。JavaScript 提供了多种方式来处理异步操作，其中 Fetch API 是一种用于发起网络请求的现代方法。它比传统的 XMLHttpRequest 更简洁、更强大，并且基于 Promise，使得异步操作更加直观和易于管理。

在本章中，我们将深入探讨如何使用 Fetch API 进行网络请求，并通过代码示例和练习帮助你掌握这一技术。

1. 什么是 Fetch API？¶

Fetch API 是 JavaScript 中用于发起网络请求的接口。它提供了一个全局的 fetch() 方法，允许你从服务器获取资源（如 JSON 数据、HTML 文件、图片等）。fetch() 方法返回一个 Promise，这意味着你可以使用 .then() 和 .catch() 方法来处理请求的成功或失败。

1.1 Fetch API 的特点¶

基于 Promise：fetch() 返回一个 Promise，使得异步操作更加直观。
简洁的语法：相比 XMLHttpRequest，Fetch API 的语法更加简洁。
支持多种请求类型：可以发起 GET、POST、PUT、DELETE 等类型的请求。
内置 JSON 解析：可以直接将响应解析为 JSON 格式。

2. 使用 Fetch API 发起 GET 请求¶

以下是一个简单的示例，展示如何使用 Fetch API 发起一个 GET 请求并处理响应。

// 发起一个 GET 请求
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    // 检查响应状态码是否为 200（成功）
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    // 将响应解析为 JSON 格式
    return response.json();
  })
  .then(data => {
    // 处理解析后的数据
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    // 捕获并处理错误
    console.error('请求出错:', error);
  });

代码解释¶

fetch('https://jsonplaceholder.typicode.com/posts/1')：发起一个 GET 请求，获取指定 URL 的资源。
.then(response => { ... })：处理响应对象。response.ok 用于检查请求是否成功（状态码为 200-299）。
response.json()：将响应体解析为 JSON 格式。
.then(data => { ... })：处理解析后的数据。
.catch(error => { ... })：捕获并处理请求过程中发生的错误。

3. 使用 Fetch API 发起 POST 请求¶

除了 GET 请求，Fetch API 还可以用于发起 POST 请求。以下是一个示例，展示如何向服务器发送 JSON 数据。

// 发起一个 POST 请求
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // 指定请求方法为 POST
  headers: {
    'Content-Type': 'application/json', // 设置请求头，表示发送的是 JSON 数据
  },
  body: JSON.stringify({ // 将 JavaScript 对象转换为 JSON 字符串
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
})
  .then(response => response.json()) // 将响应解析为 JSON 格式
  .then(data => {
    console.log('服务器返回的数据:', data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

代码解释¶

method: 'POST'：指定请求方法为 POST。
headers: { 'Content-Type': 'application/json' }：设置请求头，表示发送的是 JSON 数据。
body: JSON.stringify({ ... })：将 JavaScript 对象转换为 JSON 字符串并作为请求体发送。
其余部分与 GET 请求的处理方式相同。

4. 处理 Fetch API 的错误¶

在使用 Fetch API 时，可能会遇到各种错误，例如网络问题、服务器错误等。以下是一个示例，展示如何更好地处理这些错误。

fetch('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    if (!response.ok) {
      // 如果响应状态码不是 200-299，抛出错误
      throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    console.error('请求出错:', error.message);
  });

代码解释¶

throw new Error(...)：如果响应状态码不是 200-299，抛出一个错误。
catch(error => { ... })：捕获并处理错误，输出错误信息。

5. 练习题¶

练习 1：发起 GET 请求¶

使用 Fetch API 发起一个 GET 请求，获取以下 URL 的数据并输出到控制台：

https://jsonplaceholder.typicode.com/users

练习 2：发起 POST 请求¶

使用 Fetch API 发起一个 POST 请求，向以下 URL 发送以下数据：

URL: https://jsonplaceholder.typicode.com/posts
数据: {
  title: 'Hello World',
  body: 'This is a test post',
  userId: 1
}

练习 3：错误处理¶

修改练习 1 的代码，使其能够捕获并处理以下错误： - 网络错误 - 服务器返回的错误状态码（如 404 或 500）

6. 总结¶

在本章中，我们学习了如何使用 Fetch API 进行网络请求。以下是关键点总结： 1. fetch() 方法：用于发起网络请求，返回一个 Promise。 2. GET 请求：用于从服务器获取数据。 3. POST 请求：用于向服务器发送数据。 4. 错误处理：通过 .catch() 方法捕获并处理请求过程中发生的错误。 5. JSON 解析：使用 response.json() 将响应体解析为 JSON 格式。

通过掌握 Fetch API，你可以轻松地在 JavaScript 中处理网络请求，构建功能强大的 Web 应用程序。继续练习并尝试在实际项目中使用这些知识吧！