优化 JavaScript fetch 请求：高效发送表单数据与错误处理

本文深入探讨了如何在使用 `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 提供了一个强大的机制来捕获网络请求中可能发生的错误，包括网络连接问题、服务器错误响应等，从而使应用程序更加健壮。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

将 FormData 转换为 JSON 数据

当服务器期望接收 JSON 数据时，我们需要将 FormData 对象中收集到的键值对转换为一个普通的 JavaScript 对象，然后将其序列化为 JSON 字符串。Object.fromEntries() 方法是实现这一转换的理想工具。它接收一个可迭代的键值对（例如 FormData 对象），并返回一个新的对象。

以下是将 FormData 转换为 JSON 数据并发送的步骤：

1. 阻止表单默认提交行为：event.preventDefault() 是必不可少的，以防止浏览器执行传统的表单提交。
2. 从 FormData 创建普通对象：使用 new FormData(event.target) 获取表单数据，然后通过 Object.fromEntries() 将其转换为一个普通 JavaScript 对象。
3. 序列化为 JSON 字符串：使用 JSON.stringify() 将普通对象转换为 JSON 字符串，作为请求体。
4. 设置 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 错误。

关键注意事项

1. event.preventDefault(): 始终在表单提交事件处理函数中使用此方法，以阻止浏览器默认的页面刷新行为。
2. 服务器端数据解析: 确保你的后端 API 能够正确解析 application/json 类型的请求体。如果后端仍然期望 multipart/form-data，那么直接发送 FormData 可能是正确的选择，但通常对于非文件上传的表单数据，JSON 更为常见。
3. 响应处理:
   • response.ok: 这是一个非常重要的属性，用于检查 HTTP 响应状态码是否表示成功（200-299）。
   • response.json() 或 response.text(): 根据服务器返回的数据类型选择正确的解析方法。response.json() 返回一个 Promise，解析为 JSON 对象；response.text() 返回一个 Promise，解析为纯文本字符串。
4. 错误处理策略:
   • try...catch 块可以捕获网络错误（如断网）和在 fetch 链中抛出的错误。
   • 针对不同的 HTTP 状态码（例如 400 Bad Request, 401 Unauthorized, 500 Internal Server Error），你可能需要在 if (!response.ok) 块中进行更细致的错误处理。
5. 相对路径与绝对路径: fetch("api/booking/new", ...) 使用的是相对路径。确保这个路径相对于你的前端应用的根目录是正确的，并且能够被服务器正确路由。

总结

通过将 FormData 转换为 JSON 格式，并结合 async/await 和 try...catch 机制，我们可以构建出更健壮、可读性更强的 fetch 请求。这种方法不仅解决了服务器端对数据格式的期望不匹配问题，还大大提升了异步代码的错误处理能力，使得 Web 应用程序能够更可靠地与后端 API 进行交互。遵循这些最佳实践，将有助于开发者编写出高质量、易于维护的客户端代码。

以上就是优化 JavaScript fetch 请求：高效发送表单数据与错误处理的详细内容，更多请关注php中文网其它相关文章！