本文深入探讨了如何在使用 `fetch` API 发送 POST 请求时，将 HTML 表单数据（`FormData`）转换为 JSON 格式，并结合 `async/await` 和 `try...catch` 实现健壮的异步通信。文章将详细阐述 `FormData` 的默认行为与服务器端对 JSON 格式的期望之间的差异，提供优化后的代码示例，并强调了正确设置请求头、处理响应以及实施错误捕获的关键实践，旨在帮助开发者构建更可靠、可维护的 Web 应用程序。
使用 fetch 发送表单数据：常见挑战与最佳实践
在现代 Web 开发中，fetch API 是进行网络请求的强大工具。然而，当涉及到提交 HTML 表单数据时，开发者可能会遇到一些挑战，特别是在服务器端期望接收 JSON 格式数据时。直接将 FormData 对象作为 fetch 请求的 body 发送，虽然在某些情况下可行（例如，当服务器期望 multipart/form-data 时），但如果后端 API 专门设计用于解析 application/json，则会导致服务器无法正确解析数据，进而客户端也无法收到预期的响应。
理解 FormData 与服务器期望的数据格式
原始代码中，开发者尝试通过 new FormData(addBooking_form) 获取表单数据，并直接将其作为 fetch 请求的 body 发送：
const formData = new FormData(addBooking_form);
const asyncReqAdd = fetch("api/booking/new", {
method: "POST",
body: formData
});当 body 被设置为 FormData 对象时，fetch API 默认会发送一个 Content-Type: multipart/form-data 的请求。这种格式通常用于文件上传或处理包含复杂二进制数据的表单。然而，许多 RESTful API 更倾向于接收 application/json 格式的数据，因为它结构清晰、易于解析。如果服务器期望 JSON，而客户端发送了 multipart/form-data，那么服务器将无法识别并处理这些数据，导致请求失败或返回错误响应。此外，原始代码中的 .then().then() 链式调用在处理响应时也存在一些不足，尤其是在错误捕获和响应内容检查方面不够健壮。
立即学习“Java免费学习笔记（深入）”；
采用 async/await 优化异步请求
为了解决上述问题并提升代码的可读性与错误处理能力，推荐使用 async/await 语法来处理异步 fetch 请求。async/await 允许我们以同步的方式编写异步代码，使得逻辑流程更加直观，尤其是在处理多个连续的异步操作时。
结合 try...catch 块，async/await 提供了一个强大的机制来捕获网络请求中可能发生的错误，包括网络连接问题、服务器错误响应等，从而使应用程序更加健壮。
将 FormData 转换为 JSON 数据
当服务器期望接收 JSON 数据时，我们需要将 FormData 对象中收集到的键值对转换为一个普通的 JavaScript 对象，然后将其序列化为 JSON 字符串。Object.fromEntries() 方法是实现这一转换的理想工具。它接收一个可迭代的键值对（例如 FormData 对象），并返回一个新的对象。
以下是将 FormData 转换为 JSON 数据并发送的步骤：
- 阻止表单默认提交行为：event.preventDefault() 是必不可少的，以防止浏览器执行传统的表单提交。
- 从 FormData 创建普通对象：使用 new FormData(event.target) 获取表单数据，然后通过 Object.fromEntries() 将其转换为一个普通 JavaScript 对象。
- 序列化为 JSON 字符串：使用 JSON.stringify() 将普通对象转换为 JSON 字符串，作为请求体。
- 设置 Content-Type 请求头：在 fetch 请求的 headers 中明确指定 Content-Type: application/json，告知服务器请求体是 JSON 格式。
完善的 fetch 请求实现
以下是一个结合了 async/await、Object.fromEntries、JSON 转换和错误处理的完整示例：
const addBooking_form = document.getElementById("form_addResa");
addBooking_form.addEventListener("submit", async (event) => {
event.preventDefault(); // 阻止表单默认提交行为
try {
// 1. 从表单获取数据并转换为普通JavaScript对象
// event.target 指向触发事件的元素，即表单本身
const formDataObject = Object.fromEntries(new FormData(event.target));
// 2. 将对象转换为 JSON 字符串
const requestBody = JSON.stringify(formDataObject);
// 3. 发送异步请求
const response = await fetch("api/booking/new", {
method: "POST",
headers: {
'Content-Type': 'application/json' // 明确告知服务器发送的是 JSON 数据
},
body: requestBody // 发送 JSON 格式的请求体
});
// 4. 检查响应状态码，确保请求成功
if (!response.ok) {
// 如果响应状态码不是 2xx，抛出错误
const errorText = await response.text();
throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorText}`);
}
// 5. 解析响应数据 (假设服务器返回 JSON)
const data = await response.json();
console.log("预订成功，服务器响应数据:", data);
// 示例：更新页面内容，假设有一个名为 'table' 的元素
// table.innerHTML = JSON.stringify(data); // 根据实际需求处理响应
} catch (error) {
// 6. 捕获并处理请求过程中发生的错误
console.error("提交预订请求时发生错误:", error);
// 可以向用户显示错误消息
// alert("提交失败，请稍后再试。");
} finally {
console.log('预订请求处理完成');
}
});代码解释：
- async (event) => { ... }: 将事件监听器函数声明为 async，允许在其中使用 await。
- Object.fromEntries(new FormData(event.target)): 这是核心优化点。它直接从表单元素中提取所有具有 name 属性的输入字段的值，并创建一个键值对对象。
- JSON.stringify(formDataObject): 将 JavaScript 对象转换为 JSON 字符串，这是服务器通常期望的格式。
- headers: { 'Content-Type': 'application/json' }: 这一行至关重要，它告诉服务器请求体是 JSON 格式，以便服务器能够正确解析。
- await fetch(...): 等待 fetch 请求完成并返回 Response 对象。
- if (!response.ok) { ... }: 检查 HTTP 响应状态码。response.ok 为 true 表示状态码在 200-299 之间。如果不是，则抛出错误。
- await response.json(): 等待响应体被解析为 JSON 对象。如果服务器返回的是文本，则应使用 await response.text()。
- try...catch: 捕获在 fetch 请求或响应处理过程中可能发生的任何错误，例如网络问题、JSON 解析失败或自定义抛出的 HTTP 错误。
关键注意事项
- event.preventDefault(): 始终在表单提交事件处理函数中使用此方法，以阻止浏览器默认的页面刷新行为。
- 服务器端数据解析: 确保你的后端 API 能够正确解析 application/json 类型的请求体。如果后端仍然期望 multipart/form-data，那么直接发送 FormData 可能是正确的选择，但通常对于非文件上传的表单数据，JSON 更为常见。
-
响应处理:
- response.ok: 这是一个非常重要的属性，用于检查 HTTP 响应状态码是否表示成功（200-299）。
- response.json() 或 response.text(): 根据服务器返回的数据类型选择正确的解析方法。response.json() 返回一个 Promise，解析为 JSON 对象；response.text() 返回一个 Promise，解析为纯文本字符串。
-
错误处理策略:
- try...catch 块可以捕获网络错误（如断网）和在 fetch 链中抛出的错误。
- 针对不同的 HTTP 状态码（例如 400 Bad Request, 401 Unauthorized, 500 Internal Server Error），你可能需要在 if (!response.ok) 块中进行更细致的错误处理。
- 相对路径与绝对路径: fetch("api/booking/new", ...) 使用的是相对路径。确保这个路径相对于你的前端应用的根目录是正确的，并且能够被服务器正确路由。
总结
通过将 FormData 转换为 JSON 格式，并结合 async/await 和 try...catch 机制，我们可以构建出更健壮、可读性更强的 fetch 请求。这种方法不仅解决了服务器端对数据格式的期望不匹配问题，还大大提升了异步代码的错误处理能力，使得 Web 应用程序能够更可靠地与后端 API 进行交互。遵循这些最佳实践，将有助于开发者编写出高质量、易于维护的客户端代码。
