别再为前后端请求数据发愁，有了FormData，让你轻松搞定

相信大家都遇到过这样的场景：我们需要在前端向后端发送数据，比如我们要把一个 {a:1,b:2}这样的对象发送到后端，但是我们想要以a=1&b=2的形式发送，那么就需要将这个对象转换成字符串，这无疑会给我们的代码增加复杂性。

此时，我们可以使用 FormData 对象。FormData 是 HTML5 中新增的一个接口，它允许我们轻松地创建表单数据，并将其发送给服务器。

使用 FormData 对象来发送数据非常简单，只需要几个步骤：

1. 创建一个 FormData 对象。
2. 使用 append() 方法向 FormData 对象中添加数据。
3. 将 FormData 对象发送给服务器。

以下是具体示例：

const formData = new FormData();
formData.append('a', 1);
formData.append('b', 2);

fetch('/submit', {
  method: 'POST',
  body: formData,
});

这样，数据就会以a=1&b=2的形式发送给服务器。

FormData 对象还有其他一些非常方便的方法，比如：

• delete() 方法：从 FormData 对象中删除数据。
• has() 方法：检查 FormData 对象中是否包含某个数据。
• get() 方法：从 FormData 对象中获取某个数据。
• getAll() 方法：从 FormData 对象中获取所有数据。
• set() 方法：在 FormData 对象中设置某个数据。

这些方法都非常容易使用，可以帮助我们轻松地操作 FormData 对象。

现在，我们已经学会了如何使用 FormData 对象来发送数据，接下来我们再来看一下如何处理json、query等格式的数据。

对于json数据，我们可以使用JSON.stringify() 方法将其转换为字符串，然后发送给服务器。

const json = {
  a: 1,
  b: 2,
};

fetch('/submit', {
  method: 'POST',
  body: JSON.stringify(json),
  headers: {
    'Content-Type': 'application/json',
  },
});

对于query数据，我们可以使用URLSearchParams对象来构建查询字符串。

const params = new URLSearchParams();
params.append('a', 1);
params.append('b', 2);

fetch('/submit', {
  method: 'POST',
  body: params.toString(),
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
});

这样，数据就会以query的形式发送给服务器。

现在，我们已经学会了如何使用FormData对象来发送数据，以及如何处理json、query等格式的数据。希望这些知识能够对大家有所帮助。