如何正确使用 fetch() 发送 POST 请求并处理响应

本文详解 fetch() 在发送 json post 请求时常见的错误原因及修复方法，重点解决因 promise 链未正确捕获异常、请求体格式错误或缺少 await 导致的响应不完整问题，并提供可直接运行的修正代码示例。

在使用 fetch() 发送 POST 请求时，常见误区会导致请求看似“成功”却返回不完整数据（如仅返回 model 字段而缺失 text），而 jquery 却能正常工作——这并非后端差异，而是 fetch() 的行为特性与错误处理方式所致。

? 核心问题分析

1. try/catch 无法捕获异步 Promise 错误
   原代码中 try { fetch(…) } catch (Error) {…} 是无效的：fetch() 立即返回一个 Promise，try/catch 不会等待其 resolve/reject，因此网络错误、4xx/5xx 响应或 json 解析失败均无法被捕获。

2. 请求体（body）格式错误
   原代码中 body: [{ content: “…”, role: “user” }] 是一个数组，但目标 API（chatgpt-api8.p.rapidapi.com）实际期望的是 JSON 字符串化的对象（非数组），且需符合其文档要求的结构（如 {“model”: “gpt-3.5-turbo”, “messages”: […]}）。直接传入 JS 数组会导致后端解析失败或降级处理。

3. 缺少对 http 状态码的校验
   fetch() 在网络失败时 reject，但对 400、401、500 等 HTTP 错误状态仍会 resolve，必须手动检查 response.ok 或 response.status。

✅ 正确写法（含错误处理与结构修复）

                  Try    

⚠️ 关键注意事项

• 永远 JSON.stringify() body：fetch() 的 body 选项不接受原始对象或数组，必须是 string、Blob、FormData 等；发送 JSON 时务必 JSON.stringify(…)。
• 区分 content-type 大小写：标准 Header 名为 Content-Type（首字母大写），虽多数服务兼容小写，但建议遵循规范。
• jQuery “能用” 的原因：jQuery 的 $.ajax() 默认自动 JSON.stringify() 并内置更宽松的错误分类（如将 4xx 视为 error），掩盖了底层问题；而 fetch() 更底层、更严格，需开发者显式处理。
• 不要混用 async/await 和 .then()：选择一种风格保持代码清晰。上方示例使用 async/await，更易读且 try/catch 真正生效。

✅ 总结

fetch() 不是 jQuery 的替代品，而是更现代、更可控的原生方案——但它要求你理解 Promise 流程、HTTP 语义和序列化规则。只要确保：① body 正确序列化，② 检查 response.ok，③ 使用 async/await 或链式 .catch() 处理错误，就能稳定获取完整响应（包括 model 和 text）。