使用 fetch 发起请求后，通过返回的 response 对象提供的 .text()、.json() 或 .blob() 方法即可实现接口结果的解码。这些方法会读取响应流并返回一个 promise，解析后即可得到字符串、javascript 对象或二进制数据，从而完成从原始字节到可用数据的转换。
fetch 返回的 Response 对象包含哪些解码方法
fetch 函数本身只负责建立连接并返回一个 Response 实例，该实例并不直接包含解码后的数据，而是提供了一系列用于提取和转换数据的方法。最常用的包括 .json()，它会自动将响应体解析为 JSON 格式并返回对应的 JavaScript 对象；.text()，它将响应体作为原始 UTF-8 文本字符串返回，适用于 HTML、XML 或纯文本；以及 .blob()，它将响应体转换为 Blob 对象，常用于处理图片、文件等二进制数据。选择哪种方法取决于服务端返回的内容类型以及前端期望得到的数据结构。
const url = 'https://api.example.com/data';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 解码为 JSON 对象
})
.then(data => {
console.log('Decoded Data:', data);
})
.catch(error => {
console.error('Fetch error:', error);
});
如何处理非 JSON 格式的响应数据解码
当接口返回的数据不是标准的 JSON 格式时，例如是纯文本、HTML 片段或 XML，应使用 .text() 方法进行解码。这种方法不会尝试解析内容结构，而是直接将字节流转换为字符串。如果需要对 XML 进行进一步处理，可以在获取字符串后结合 DOMParser 将其解析为 DOM 文档。对于二进制数据如图片或 PDF，则应使用 .blob() 或 .arrayBuffer()，以便后续通过 URL.createObjectURL 或 File API 进行处理。关键在于根据 Content-Type 头信息判断数据类型，并调用对应的解码方法，避免对非 JSON 数据错误地调用 .json() 导致解析失败。
const textUrl = 'https://api.example.com/raw-text';
fetch(textUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text(); // 解码为纯文本字符串
})
.then(textData => {
console.log('Decoded Text:', textData);
// 可在此处对 textData 进行进一步处理，如 DOMParser 解析 XML
})
.catch(error => {
console.error('Fetch error:', error);
});
解码过程中遇到网络错误或无效响应码该如何处理
在解码前必须检查 Response 对象的 ok 属性或 status 字段，因为即使服务器返回了错误状态码（如 404 或 500），fetch 默认也不会抛出异常，而是成功返回一个 Response 对象。此时若直接调用 .json() 等方法，可能会因响应体为空或非预期格式而引发解析错误。因此，应在解码前先判断 !response.ok，若为真则主动抛出错误或使用 response.text() 读取错误详情以便调试。这种前置校验能确保解码操作仅在有效响应上执行，提升代码健壮性。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
