解锁Web API的Fetch：前端数据交互新利器在前端开发的广袤领域中，数据交互就像是整个应用程序的生命线，其重要性不

一、引言

在前端开发的广袤领域中，数据交互就像是整个应用程序的生命线，其重要性不言而喻。从简单的网页到复杂的单页应用程序，前端与后端之间的数据传输和通信是实现各种功能的基础。无论是展示实时数据、提交用户表单，还是实现动态交互效果，都离不开高效的数据交互。

在众多实现数据交互的技术方案中，Fetch API 脱颖而出，成为现代前端开发的得力助手。它为开发者提供了一种简洁、强大且基于 Promise 的方式来处理网络请求，极大地简化了前端与后端之间的数据通信过程。与传统的 XMLHttpRequest 相比，Fetch API 具有更直观的语法和更丰富的功能，使得开发者能够更轻松地控制请求和处理响应。同时，它还支持各种现代特性，如流式处理、跨域请求等，为构建高性能、高扩展性的 Web 应用提供了有力支持。掌握 Fetch API 的使用，不仅可以提升前端开发的效率，还能为用户带来更流畅、更优质的使用体验。

二、Fetch API 基础揭秘

2.1 定义与作用

Fetch API 是一组用于在 Web 浏览器中进行网络请求的现代 JavaScript API ，你可以把它看作是 XMLHttpRequest 的升级版，它提供了一种更简洁、更强大的方式来处理网络请求。Fetch API 主要用于帮助前端与后端进行数据交互。通过它，开发者可以轻松地发送 HTTP 请求到服务器，并接收服务器返回的响应数据，无论是获取数据、提交表单还是上传文件，Fetch API 都能轻松搞定。在构建一个新闻应用时，就可以使用 Fetch API 从服务器获取最新的新闻列表数据，然后将这些数据展示在页面上。又或者在一个电商网站中，用户提交订单的操作也可以通过 Fetch API 将订单信息发送到服务器进行处理。

2.2 与传统 XMLHttpRequest 对比

在前端开发的历史长河中，XMLHttpRequest 曾是进行网络请求的主力军。然而，随着技术的不断发展，Fetch API 逐渐崭露头角，成为了更受欢迎的选择。下面从多个方面对二者进行对比。

语法方面：XMLHttpRequest 的语法相对繁琐。以发送一个简单的 GET 请求为例，需要创建 XMLHttpRequest 对象，调用 open 方法初始化请求，设置 onreadystatechange 事件处理函数来监听请求状态变化，最后调用 send 方法发送请求。而 Fetch API 使用起来则简洁得多，只需要调用 fetch 函数并传入请求的 URL 即可发起请求，后续通过 then 方法处理响应数据，代码量明显减少，结构也更加清晰直观。

异步处理：XMLHttpRequest 基于事件驱动的回调机制，这种方式在处理复杂的异步操作时，容易导致代码结构混乱，出现回调地狱的问题。而 Fetch API 是基于 Promise 设计的，通过链式调用的方式处理异步操作，使得代码的逻辑更加清晰，可读性和维护性大大提高。在同时需要发起多个请求，并且这些请求之间存在依赖关系时，使用 Fetch API 可以很方便地通过 Promise.all 等方法进行处理，而使用 XMLHttpRequest 则需要编写较为复杂的代码来管理这些异步操作。

功能特性：Fetch API 提供了丰富的配置选项，在发起请求时，可以轻松设置请求方法、请求头、请求体、跨域模式、缓存策略等。同时，Fetch API 的响应对象也提供了多种便捷的方法来处理不同类型的响应数据，如 json () 方法用于解析 JSON 数据、text () 方法用于获取文本数据、blob () 方法用于处理二进制大对象数据等。相比之下，XMLHttpRequest 在某些功能的实现上相对复杂，对新特性的支持也不如 Fetch API 全面。

三、Fetch 的基本用法

3.1 简单 GET 请求示例

在了解了 Fetch API 的基本概念之后，接下来通过具体的代码示例来看看它的实际用法。先从最常见的 GET 请求开始。假设要从服务器获取一些用户数据，数据接口为api.example.com/users，使用 Fetch API 发送这个 GET 请求的代码如下：

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

在这段代码中，fetch函数接收一个 URL 参数，这个 URL 指向要请求的服务器资源。fetch函数会返回一个 Promise 对象，这个 Promise 对象在请求成功完成后会被 resolve，resolve 的值是一个Response对象，它包含了服务器返回的响应信息。接下来，通过then方法处理这个Response对象。在第一个then回调函数中，使用response.json()方法将响应数据解析为 JSON 格式，因为从服务器获取的数据通常是 JSON 格式的，这个方法会返回一个新的 Promise 对象，该 Promise 对象在解析完成后会被 resolve，resolve 的值就是解析后的 JSON 数据。在第二个then回调函数中，就可以对解析后的 JSON 数据进行操作了，这里只是简单地将数据打印到控制台。如果在整个请求过程中发生了错误，比如网络连接失败、服务器响应错误等，fetch返回的 Promise 对象会被 reject，通过catch方法可以捕获到这些错误，并进行相应的处理，这里是将错误信息打印到控制台。

3.2 解析响应数据

在上述示例中，使用了response.json()方法来解析响应数据为 JSON 格式。这是一种非常常见的情况，当服务器返回的数据是 JSON 格式时，response.json()方法可以帮助我们轻松地将响应数据转化为 JavaScript 对象，方便后续的操作。

除了response.json()方法，Response对象还提供了其他几种方法来解析不同类型的响应数据：

response.text() ：当服务器返回的是文本数据，如 HTML、纯文本等，就可以使用这个方法。它会返回一个 Promise 对象，resolve 的值是一个字符串，包含了服务器返回的文本内容。在请求一个 HTML 页面时：

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

response.blob() ：如果服务器返回的是二进制大对象数据，比如图片、音频、视频等文件，就可以使用response.blob()方法。它会返回一个 Promise 对象，resolve 的值是一个Blob对象，代表了二进制数据。在请求一张图片时：

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
      const img = document.createElement('img');
      img.src = URL.createObjectURL(blob);
      document.body.appendChild(img);
    })
  .catch(error => console.error('Error:', error));

response.arrayBuffer() ：这个方法用于获取二进制数据的ArrayBuffer形式，适用于处理一些需要直接操作二进制数据的场景，比如处理音频数据进行音频分析等。它返回的 Promise 对象 resolve 的值是一个ArrayBuffer。

response.formData() ：当服务器返回的是表单数据时，可以使用这个方法。它会返回一个 Promise 对象，resolve 的值是一个FormData对象，包含了表单的键值对数据。

四、定制 HTTP 请求

在实际的 Web 开发中，HTTP 请求往往需要根据具体的业务需求进行定制。Fetch API 提供了丰富的配置选项，让开发者可以灵活地设置请求方法、请求头、请求体以及其他一些重要的参数。

4.1 设置请求方法（GET、POST、PUT、DELETE 等）

Fetch API 通过method参数来设置 HTTP 请求的方法，常见的请求方法有 GET、POST、PUT、DELETE 等，不同的请求方法用于不同的操作场景。GET 方法通常用于从服务器获取数据，POST 方法用于向服务器提交数据，PUT 方法用于更新服务器上的资源，DELETE 方法用于删除服务器上的资源。

下面是一个使用 POST 方法提交数据的示例：

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

在这个示例中，通过method: 'POST'设置了请求方法为 POST。因为要发送 JSON 格式的数据，所以在headers中设置了Content-Type为application/json，然后将用户名和密码数据通过JSON.stringify方法转换为 JSON 字符串，作为请求体body发送到服务器。

4.2 配置请求头（headers）

请求头是 HTTP 请求中的重要组成部分，它包含了关于请求的一些元信息，如内容类型、认证信息等。Fetch API 允许通过headers参数来设置自定义请求头。

设置Content-Type请求头来指定请求体的数据类型。在上面的登录示例中，已经展示了如何设置Content-Type为application/json，表示请求体是 JSON 格式的数据。如果要发送表单数据，就需要将Content-Type设置为application/x-www-form-urlencoded 。

在进行用户认证时，通常会使用Authorization请求头来传递认证令牌。假设使用 Bearer 令牌进行认证，设置Authorization请求头的示例如下：

fetch('https://api.example.com/protected', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer yourTokenHere'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个示例中，通过'Authorization': 'Bearer yourTokenHere'将认证令牌添加到请求头中，服务器可以根据这个令牌来验证请求的合法性。

4.3 传递请求体（body）

请求体是 HTTP 请求中携带的数据部分，Fetch API 支持多种数据类型的请求体设置。

当发送 JSON 数据时，使用JSON.stringify方法将 JavaScript 对象转换为 JSON 字符串，然后作为请求体传递。在前面的登录示例中已经展示了这种方式。

当发送表单数据时，可以使用FormData对象。假设页面上有一个表单，包含用户名和密码字段，要将表单数据发送到服务器，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <form id="loginForm">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Submit</button>
  </form>
  <script>
    const form = document.getElementById('loginForm');
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      const formData = new FormData(form);
      fetch('https://api.example.com/login', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
    });
  </script>
</body>
</html>

在这个示例中，首先获取表单元素，然后为表单的提交事件添加监听器。在监听器函数中，使用new FormData(form)创建一个FormData对象，它会自动收集表单中的数据。最后将FormData对象作为请求体发送到服务器。

4.4 其他配置参数（mode、credentials、cache 等）

mode （请求模式） ：mode参数用于设置请求的模式，主要有cors（跨域资源共享）、no-cors（不允许跨域）、same-origin（同源请求）。cors模式用于允许跨域请求，在访问第三方 API 时经常使用；no-cors模式下，请求只能使用简单的请求方法（GET、HEAD、POST）和简单的请求头，并且 JavaScript 无法访问响应的任何属性，主要用于防止跨域泄漏数据；same-origin模式确保请求始终在同源内进行，如果对其他源发起请求，会返回错误。

// 使用cors模式进行跨域请求
fetch('https://otherdomain.com/api/data', {
  mode: 'cors'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

credentials （凭据设置） ：credentials参数用于设置是否发送凭据（如 cookies、HTTP 基本认证等），有omit（从不发送）、same-origin（同源时发送）、include（总是发送，包括跨域请求）三个值。默认情况下，Fetch API 不会发送凭据，如果需要发送，需要设置credentials参数。

// 总是发送凭据
fetch('https://api.example.com/data', {
  credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

cache （缓存策略） ：cache参数用于设置请求的缓存策略，有default（默认策略，浏览器会根据情况决定是否使用缓存）、no-store（不使用缓存，直接从服务器获取数据，并且不更新缓存）、reload（从服务器重新获取数据，并且更新缓存）、no-cache（先检查缓存，如果有缓存则向服务器发送条件请求，根据服务器响应决定是否使用缓存）、force-cache（先检查缓存，如果有缓存则使用缓存，否则从服务器获取数据并更新缓存）、only-if-cached（只使用缓存，如果没有缓存则返回错误，该模式只能用于同源请求）。

// 使用no-cache缓存策略
fetch('https://api.example.com/data', {
  cache: 'no-cache'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

五、Response 对象详解

在使用 Fetch API 进行网络请求时，服务器返回的响应数据被封装在Response对象中。深入了解Response对象的属性和方法，对于正确处理响应数据至关重要。

5.1 Response 的同步属性

Response.ok：这是一个布尔属性，用于判断请求是否成功。当服务器返回的状态码在 200 到 299 之间时，Response.ok的值为true，表示请求成功；否则为false。通过检查这个属性，可以快速了解请求的执行情况。在请求用户信息时：

fetch('https://api.example.com/user')
  .then(response => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error('Network response was not ok');
      }
    })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Response.status：该属性返回一个数字，表示 HTTP 响应的状态码。常见的状态码有 200（表示成功）、404（表示未找到资源）、500（表示服务器内部错误）等。通过获取Response.status，可以根据不同的状态码进行相应的处理。在请求一个不存在的资源时：

fetch('https://api.example.com/nonexistent')
  .then(response => {
      console.log('Status:', response.status);
      if (response.status === 404) {
        console.log('Resource not found');
      }
    })
  .catch(error => console.error('Error:', error));

Response.statusText：返回一个字符串，表示 HTTP 响应的状态信息。当状态码为 200 时，Response.statusText通常为"OK"；当状态码为 404 时，通常为"Not Found"。这个属性可以用于更详细地了解响应状态。

Response.url：返回请求的 URL。如果在请求过程中发生了重定向，该属性返回的是最终的 URL。在请求一个可能会发生重定向的 URL 时：

fetch('https://redirect.example.com')
  .then(response => {
      console.log('Final URL:', response.url);
    })
  .catch(error => console.error('Error:', error));

Response.type：返回请求的类型，可能的值有"basic"（基本请求，同源请求）、"cors"（跨域请求）、"error"（网络错误）、"opaque"（不透明请求，通常是由于违反了跨域策略）、"opaque - redirect"（不透明重定向）、"navigate"（导航请求，用于 HTML 页面的加载）。

Response.redirected：返回一个布尔值，表示请求是否发生过跳转。如果请求发生了重定向，该属性为true；否则为false。

5.2 读取响应内容的方法

response.json() ：用于将响应数据解析为 JSON 格式。这是最常用的方法之一，当服务器返回的数据是 JSON 格式时，使用response.json()可以轻松地将其转换为 JavaScript 对象，方便后续处理。在获取用户列表数据时：

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

response.text() ：用于获取文本数据，比如 HTML、纯文本等。它会返回一个 Promise 对象，resolve 的值是一个字符串，包含了服务器返回的文本内容。在请求一个 HTML 页面时：

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

response.blob() ：如果服务器返回的是二进制大对象数据，比如图片、音频、视频等文件，就可以使用response.blob()方法。它会返回一个 Promise 对象，resolve 的值是一个Blob对象，代表了二进制数据。在请求一张图片时：

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
      const img = document.createElement('img');
      img.src = URL.createObjectURL(blob);
      document.body.appendChild(img);
    })
  .catch(error => console.error('Error:', error));

response.arrayBuffer() ：这个方法用于获取二进制数据的ArrayBuffer形式，适用于处理一些需要直接操作二进制数据的场景，比如处理音频数据进行音频分析等。它返回的 Promise 对象 resolve 的值是一个ArrayBuffer。

response.formData() ：当服务器返回的是表单数据时，可以使用这个方法。它会返回一个 Promise 对象，resolve 的值是一个FormData对象，包含了表单的键值对数据。在处理服务器返回的表单数据时：

fetch('https://api.example.com/formdata')
  .then(response => response.formData())
  .then(formData => {
      for (let [key, value] of formData.entries()) {
        console.log(key, value);
      }
    })
  .catch(error => console.error('Error:', error));

5.3 Response.clone () 方法

Stream对象只能读取一次，读取完就没了。这意味着，前面提到的五个读取方法，只能使用一个，否则会报错。假设先使用了response.json()方法，就把Stream读完了，后面再调用response.blob()方法，就没有内容可读了，所以会报错。

为了解决这个问题，Response对象提供了clone()方法，用于创建Response对象的副本，实现多次读取。在需要多次读取同一张图片的二进制数据时：

const response1 = await fetch('flowers.jpg');
const response2 = response1.clone();
const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();
const img1 = document.createElement('img');
const img2 = document.createElement('img');
img1.src = URL.createObjectURL(myBlob1);
img2.src = URL.createObjectURL(myBlob2);
document.body.appendChild(img1);
document.body.appendChild(img2);

在这个示例中，首先使用fetch获取图片数据，得到response1。然后通过response1.clone()创建了response2，这样就可以分别从response1和response2中读取图片的二进制数据，实现了多次读取。

六、错误处理与异常情况

在使用 Fetch API 进行网络请求时，难免会遇到各种错误和异常情况。合理地处理这些错误，对于保证应用程序的稳定性和用户体验至关重要。

6.1 使用.catch 捕获错误

Fetch API 基于 Promise 设计，因此可以使用.catch方法来捕获在请求过程中发生的错误。这些错误可能包括网络连接失败、服务器响应错误、请求超时等情况。当fetch返回的 Promise 被 reject 时，.catch方法中的回调函数会被执行，开发者可以在这个回调函数中对错误进行处理，比如向用户显示错误信息、记录错误日志等。

在请求一个不存在的服务器地址时：

fetch('https://nonexistent.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('There was an error:', error));

在这个示例中，由于请求的服务器地址不存在，fetch返回的 Promise 会被 reject，.catch方法捕获到这个错误，并将错误信息打印到控制台。

6.2 处理非 200 状态码的响应

在 HTTP 请求中，状态码用于表示请求的处理结果。通常，状态码在 200 到 299 之间表示请求成功，而其他状态码则表示各种错误或异常情况。Fetch API 中，可以通过检查Response.ok属性来判断响应状态码是否在 200 到 299 之间。如果Response.ok为false，则表示请求失败，需要对这种异常响应进行处理。

在请求一个需要认证的资源，但未提供正确的认证信息时，服务器可能返回 401 状态码：

fetch('https://api.example.com/protected', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer wrongToken'
  }
})
.then(response => {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error('Unauthorized');
  }
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个示例中，首先发送一个带有错误认证令牌的 GET 请求。在then回调函数中，检查response.ok属性。如果为false，则抛出一个新的错误'Unauthorized'，然后在.catch方法中捕获并处理这个错误。

七、实际应用场景

7.1 数据获取与展示

在前端页面中，Fetch API 常用于从服务器获取数据并展示在页面上。以一个新闻应用为例，假设服务器提供了一个新闻列表的 API，接口地址为api.example.com/news，使用 Fetch 获取新闻数据并展示在页面上的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>News App</title>
</head>
<body>
  <h1>Latest News</h1>
  <ul id="newsList"></ul>
  <script>
    fetch('https://api.example.com/news')
     .then(response => response.json())
     .then(data => {
        const newsList = document.getElementById('newsList');
        data.forEach(news => {
          const li = document.createElement('li');
          li.innerHTML = `<strong>${news.title}</strong><br>${news.content}`;
          newsList.appendChild(li);
        });
      })
     .catch(error => console.error('Error:', error));
  </script>
</body>
</html>

在这段代码中，首先使用fetch函数向api.example.com/news发送 GET 请求，获取新闻数据。然后将响应数据解析为 JSON 格式，遍历新闻数据数组，为每一条新闻创建一个li元素，并将新闻标题和内容添加到li元素中，最后将li元素添加到页面的ul列表中，实现新闻数据的展示。

7.2 表单提交

在网页开发中，表单提交是常见的操作之一。Fetch API 可以方便地实现表单数据的提交。假设页面上有一个用户注册表单，包含用户名、密码和邮箱字段，当用户点击提交按钮时，使用 Fetch 将表单数据发送到服务器进行处理。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
</head>
<body>
  <form id="registrationForm">
    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username" required><br>
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password" required><br>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br><br>
    <input type="submit" value="Register">
  </form>
  <script>
    const form = document.getElementById('registrationForm');
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      const formData = new FormData(form);
      fetch('https://api.example.com/register', {
        method: 'POST',
        body: formData
      })
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error('Error:', error));
    });
  </script>
</body>
</html>

在这段代码中，首先获取表单元素，并为表单的提交事件添加监听器。在监听器函数中，使用new FormData(form)创建一个FormData对象，它会自动收集表单中的数据。然后使用fetch函数向api.example.com/register发送 POST 请求，将FormData对象作为请求体发送到服务器。服务器接收到请求后，可以对表单数据进行处理，如验证用户信息、将用户信息保存到数据库等。

7.3 与后端 API 交互

在前后端分离的项目中，Fetch API 是前端与后端 API 进行交互的重要工具。以一个简单的用户管理系统为例，后端使用 Node.js 和 Express 框架搭建 API，前端使用 HTML、CSS 和 JavaScript，并借助 Fetch API 与后端进行交互。

后端 API 代码示例：

const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
// 模拟用户数据
const users = [];
// 获取所有用户
app.get('/api/users', (req, res) => {
  res.json(users);
});
// 添加新用户
app.post('/api/users', (req, res) => {
  const newUser = req.body;
  users.push(newUser);
  res.json({ message: 'User added successfully' });
});
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

前端代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Management System</title>
</head>
<body>
  <h1>User Management System</h1>
  <h2>User List</h2>
  <ul id="userList"></ul>
  <h2>Add New User</h2>
  <form id="addUserForm">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br>
    <label for="age">Age:</label><br>
    <input type="number" id="age" name="age" required><br><br>
    <input type="submit" value="Add User">
  </form>
  <script>
    // 获取用户列表
    function getUsers() {
      fetch('http://localhost:3000/api/users')
      .then(response => response.json())
      .then(data => {
          const userList = document.getElementById('userList');
          userList.innerHTML = '';
          data.forEach(user => {
            const li = document.createElement('li');
            li.innerHTML = `Name: ${user.name}, Age: ${user.age}`;
            userList.appendChild(li);
          });
        })
      .catch(error => console.error('Error:', error));
    }
    // 添加新用户
    const addUserForm = document.getElementById('addUserForm');
    addUserForm.addEventListener('submit', function (e) {
      e.preventDefault();
      const formData = {
        name: addUserForm.name.value,
        age: addUserForm.age.value
      };
      fetch('http://localhost:3000/api/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      })
     .then(response => response.json())
     .then(data => {
        console.log(data);
        getUsers(); // 添加用户后重新获取用户列表
      })
     .catch(error => console.error('Error:', error));
    });
    // 初始化页面时获取用户列表
    getUsers();
  </script>
</body>
</html>

在这个示例中，前端通过 Fetch API 向后端发送 GET 请求获取用户列表数据，并将数据展示在页面上。当用户在表单中输入新用户信息并提交时，前端通过 Fetch API 向后端发送 POST 请求，将新用户数据发送到后端。后端接收到请求后，将新用户数据添加到模拟的用户数组中，并返回成功消息。前端在接收到成功消息后，重新调用获取用户列表的函数，更新页面上的用户列表，实现前后端的数据交互。

八、总结与展望

Fetch API 以其简洁的语法、强大的功能和基于 Promise 的设计，在现代 Web 开发中占据了重要地位。它为前端开发者提供了一种高效、灵活的数据交互方式，大大简化了网络请求的处理过程。

通过本文的介绍，我们深入了解了 Fetch API 的基础概念、基本用法、定制 HTTP 请求的方式、Response 对象的属性和方法，以及错误处理和实际应用场景。与传统的 XMLHttpRequest 相比，Fetch API 具有明显的优势，如更简洁的语法、更清晰的异步处理方式、更丰富的功能特性等。

在未来的 Web 开发中，随着技术的不断发展和浏览器对 Fetch API 支持的进一步完善，Fetch API 有望成为前端数据交互的主流技术。它将在更多的场景中发挥重要作用，助力开发者构建出更加高效、稳定、用户体验良好的 Web 应用程序。希望读者通过本文的学习，能够掌握 Fetch API 的使用方法，并在实际项目中灵活运用，提升项目的开发效率和质量。