使用 fetch() 发送 post 请求并传递 json 数据，需要配置 method 为 'post'，在 headers 中指定 content-type 为 'application/json'，并将对象通过 json.stringify() 序列化后赋值给 body。这样做会将数据以 json 字符串形式发送到服务器，服务器解析后即可获取对应的键值对。
如何构建包含必要 Headers 的请求配置对象
构建请求配置时，必须显式设置 Content-Type 头部，否则服务器可能无法正确解析请求体中的 JSON 数据。同时，需要将 JavaScript 对象转换为 JSON 字符串，因为 fetch 的 body 属性接受字符串、Buffer 或 Stream 等格式，而不直接接受原生对象。以下代码展示了如何组装这些参数并发起请求。
const url = 'https://api.example.com/data';
const data = { name: 'Alice', age: 30 };
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => console.log('Success:', result))
.catch(error => console.error('Error:', error));
运行上述代码后，控制台将输出服务器返回的 JSON 响应内容。如果网络请求失败或服务器返回错误状态码，catch 块会捕获异常并打印错误信息。注意，fetch 仅在网络故障时拒绝 Promise，HTTP 错误状态（如 404）不会触发 catch，需手动检查 response.ok。
如何处理异步响应与错误状态
处理异步响应时，应优先检查 response.ok 属性来判断 HTTP 状态是否在 200-299 范围内。若状态非成功，可抛出错误以便进入 catch 块统一处理。此外，使用 async/await 语法可使代码更简洁，避免回调嵌套。以下示例展示了如何使用现代语法进行健壮的错误处理。
async function postData() {
const url = 'https://api.example.com/data';
const data = { name: 'Bob', role: 'admin' };
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
console.log('Success:', result);
} catch (error) {
console.error('Fetch failed:', error.message);
}
}
postData();
执行该函数后，若服务器正常响应，控制台将打印成功结果；若发生网络错误或 HTTP 错误，将打印具体的错误消息。这种模式确保了无论请求成功与否，都能得到明确的反馈，便于调试和日志记录。
当请求体中包含特殊字符或嵌套对象时会发生什么
当 body 中的数据包含特殊字符（如中文、emoji）或深层嵌套对象时，JSON.stringify() 会自动进行转义和序列化，确保生成的 JSON 字符串符合 RFC 8259 标准。服务器端通常依赖 Content-Type 头部来识别数据格式，只要头部正确设置，即使数据复杂也能被正确解析。例如，发送包含 emoji 的用户名或嵌套的地址对象，不会导致请求失败，前提是服务器支持 UTF-8 编码。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
