javascript fetch api 实现请求数据预序列化的核心做法是:在发起请求前,手动将对象转换为 json 字符串并设置 content-type 为 application/json。具体操作是使用 json.stringify() 处理数据,并在 fetch 的 body 参数中传入该字符串,同时通过 headers 显式声明类型,确保后端能正确解析。

如何避免 fetch 自动序列化导致的数据丢失?
当 fetch 的 body 被设置为普通对象时,浏览器会自动将其序列化为表单格式(application/x-www-form-urlencoded),这会导致嵌套对象或数组被扁平化,造成数据丢失。要解决这个问题,必须在发送前手动调用 JSON.stringify() 将数据转为字符串,并覆盖默认的 Content-Type 头。

const data = {
user: 'alice',
settings: { theme: 'dark', lang: 'zh' }
};
// 错误写法:body 直接传对象,会被序列化为 form-data
// fetch('/api', { method: 'POST', body: data });
// 正确写法:预序列化
const jsonString = JSON.stringify(data);
fetch('/api', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: jsonString
});
console.log('Sent:', jsonString); // 输出: {"user":"alice","settings":{"theme":"dark","lang":"zh"}}
如何处理 fetch 请求中的循环引用错误?
如果在预序列化阶段遇到 TypeError: Converting circular structure to JSON,说明数据中存在循环引用。此时不能直接使用 JSON.stringify(),需要引入自定义的序列化逻辑或使用第三方库如 lodash.cloneDeep 进行深拷贝后再序列化,或者在序列化前手动移除循环引用的属性。
立即学习“Java免费学习笔记(深入)”;

// 模拟循环引用
const obj = { name: 'test' };
obj.self = obj;
try {
JSON.stringify(obj); // 抛出 TypeError
} catch (e) {
console.error('Circular reference detected');
}
// 解决方案:使用 replacer 函数过滤
const safeJson = JSON.stringify(obj, (key, value) => {
if (typeof value === 'object' && value !== null) {
if (value === obj) return undefined; // 忽略循环引用
}
return value;
});
console.log(safeJson); // 输出: {"name":"test"}
基于程序中某个输入、条件或结果的具体问题
当输入数据包含特殊字符或 Unicode 转义需求时,JSON.stringify() 默认会保留原始字符,但某些后端系统可能期望 ASCII 安全的输出。此时可以通过 JSON.stringify() 的第三个参数 replacer 或自定义 toJSON 方法来控制输出格式,确保数据在传输过程中不被破坏。


















