本文深入探讨了如何在使用 `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 进行交互。遵循这些最佳实践，将有助于开发者编写出高质量、易于维护的客户端代码。
以上就是优化 JavaScript fetch 请求：高效发送表单数据与错误处理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1594549.html
微信扫一扫 
支付宝扫一扫 
