FormData API：方便构造和发送表单数据

在 Web 开发中，我们经常需要通过表单来收集用户的输入数据，并将这些数据发送到服务器。常规的方法是使用 fetch API 来发送 AJAX 请求。但是，使用这些 API 需要手动构造请求体，比较繁琐。而 FormData API 提供了一种更为简单的方式来构造请求体，并发送表单数据。

FormData API 可以将表单数据封装成一个 FormData 对象，从而方便地使用 fetch API 发送表单数据。通过 FormData API，我们可以轻松地构造包含文本、文件等类型的表单数据，并将它们发送给服务器。

创建 FormData 对象

要使用 FormData API，我们需要先创建一个 FormData 对象。可以通过 new FormData() 来创建一个空的 FormData 对象，然后使用 append() 方法向其中添加表单数据。

const formData = new FormData();
formData.append("username", "John");
formData.append("password", "123456");

在这个示例中，我们首先创建了一个空的 FormData 对象 formData。然后，使用 append() 方法向其中添加了两个表单数据，分别是 username 和 password。

append() 方法接受两个参数，第一个参数是表单数据的名称，第二个参数是表单数据的值。它可以被调用多次，以便将多个表单数据添加到同一个 FormData 对象中。

除了使用 append() 方法之外，我们还可以使用 set() 方法来设置表单数据。set() 方法与 append() 方法类似，不同之处在于，如果指定的表单数据已经存在，则先删除它，然后再添加新值。

formData.set("password", "654321");

在这个示例中，我们使用 set() 方法将 password 的值从 123456 修改为 654321。

另外，我们还可以通过传入表单元素的引用来创建 FormData 对象，这样可以自动将表单元素的数据添加到 FormData 对象中。

const form = document.querySelector("form");
const formData = new FormData(form);

在这个示例中，我们使用 document.querySelector() 方法获取了一个表单元素 form 的引用，然后将其作为参数传入 FormData 构造函数中，从而创建了一个包含表单元素数据的 FormData 对象。

发送 FormData 数据

创建了 FormData 对象之后，我们可以使用 fetch API 发送表单数据。

使用 fetch API 发送 FormData 数据

使用 fetch API 发送 FormData 数据的方式也非常简单，只需要将 FormData 对象作为 fetch() 方法的 body 参数即可。

fetch("/api/login", {
  method: "POST",
  body: formData,
}).then((response) => console.log("成功地发送了 FormData 数据。"));

在上一个示例中，我们使用 fetch() 方法发送了一个 POST 请求，并将 FormData 对象作为 body 参数传入。fetch API 会自动识别 body 参数的类型，当它的类型为 FormData 时，它会将请求头中的 Content-Type 设置为 multipart/form-data，并将 FormData 对象中的数据序列化为 multipart/form-data 格式。这样，服务器就能够正确地解析 FormData 数据，并获取其中的各个表单项。

使用 async/await 发送 FormData 数据

在使用 fetch() 方法进行异步请求时，我们可以使用 async/await 来简化代码。例如，下面的示例中使用了 async/await 来发送 FormData 数据：

async function login() {
  const formData = new FormData();
  formData.append("username", "John");
  formData.append("password", "123456");

  try {
    const response = await fetch("/api/login", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

login();

在这个示例中，我们首先定义了一个名为 login 的 async 函数，该函数中创建了一个 FormData 对象并向其中添加表单数据。然后，我们使用 fetch() 方法发送了一个 POST 请求，并将 FormData 对象作为 body 参数传入。在获取响应结果后，我们使用 await 关键字来等待返回的 Promise 对象，从而将响应结果转换为 JSON 格式并输出到控制台中。如果请求过程中发生了错误，则会通过 catch 语句捕获并输出错误信息。

总结

通过 FormData API，我们可以非常方便地构造和发送表单数据。无论是文本、文件，还是混合类型的表单数据，都可以通过 FormData API 轻松处理。同时，FormData API 也为前端开发者提供了更加优雅的方式来处理表单数据，减少了手动构造请求体的工作量，提高了开发效率。

需要注意的是，FormData API 并不是所有浏览器都支持的，尤其是一些旧版本的浏览器可能并不支持它。因此，在使用 FormData API 时，需要根据具体的业务需求来判断是否兼容旧版浏览器，或者考虑使用 polyfill 或其他替代方案。