本文深入探讨 JavaScript Fetch API 在处理服务器响应时的关键技巧，重点讲解如何正确解析不同类型的响应数据（文本、JSON、Blob），以及如何避免“Already read”等常见错误。通过实例代码，帮助开发者掌握 `response.text()`、`response.json()` 和 `response.blob()` 的正确使用方式，确保高效、准确地获取和处理网络请求返回的数据。
理解 Fetch API 及其响应处理机制
JavaScript 的 fetch API 提供了一种现代、基于 Promise 的方式来发起网络请求。它返回一个 Response 对象，该对象包含了请求的元数据（如状态码、头部信息）以及一个表示响应体内容的流。直接从 Response 对象中获取所需的数据（如文本、JSON 或二进制数据）需要进一步的处理。
当服务器返回数据时，我们通常期望得到特定格式的数据，例如纯文本字符串、JSON 对象或文件（如图片、PDF 等）。fetch API 提供了不同的方法来解析这些数据流：
- response.text(): 将响应体解析为纯文本字符串。
- response.json(): 将响应体解析为 JSON 对象。
- response.blob(): 将响应体解析为 Blob 对象，常用于处理二进制数据。
这些方法都是异步的，它们返回一个 Promise，该 Promise 在数据解析完成后解析为相应的数据类型。
立即学习“Java免费学习笔记（深入）”；
正确解析 Fetch 响应数据
在使用 fetch API 时，一个常见的误区是未能正确地处理 Response 对象返回的 Promise 链。以下是正确处理各种响应类型的方法：
1. 解析纯文本响应
假设服务器端使用 Express 框架，并返回一个简单的字符串：
// server.js (Express)
const express = require('express');
const app = express();
const port = 3000;
function getEntry(key) {
// 模拟数据获取
return `Val is ${key}`;
}
app.get('/getEntry/:key', (req, res) => {
res.send(getEntry(req.params.key)); // 返回纯文本
});
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});客户端应使用 response.text() 来解析此响应：
// client.js
const local_IP = 'localhost'; // 替换为你的实际IP
const hash = 'val1'; // 示例键
fetch(`http://${local_IP}:3000/getEntry/${hash}`)
.then(response => {
// 检查响应状态，确保请求成功
if (!response.ok) {
throw new Error('网络请求失败，状态码: ' + response.status);
}
// 关键：返回 response.text() 的 Promise
return response.text();
})
.then(data => {
// 在这里获取到解析后的纯文本字符串
console.log('获取到的文本数据:', data); // 预期输出: "Val is val1"
})
.catch(error => {
console.error('Fetch 请求出错:', error);
});2. 解析 JSON 响应
如果服务器返回 JSON 数据：
// server.js (Express)
// ...
app.get('/getJsonEntry/:key', (req, res) => {
res.json({ key: req.params.key, value: `Val is ${req.params.key}` }); // 返回JSON
});
// ...客户端应使用 response.json()：
// client.js
// ...
fetch(`http://${local_IP}:3000/getJsonEntry/${hash}`)
.then(response => {
if (!response.ok) {
throw new Error('网络请求失败，状态码: ' + response.status);
}
// 关键：返回 response.json() 的 Promise
return response.json();
})
.then(jsonObject => {
// 在这里获取到解析后的 JSON 对象
console.log('获取到的JSON数据:', jsonObject); // 预期输出: { key: "val1", value: "Val is val1" }
console.log('JSON对象的某个属性:', jsonObject.value);
})
.catch(error => {
console.error('Fetch 请求出错:', error);
});3. 解析 Blob（二进制）响应
当需要处理文件或二进制数据时，可以使用 response.blob()。
// client.js
// ...
fetch(`http://${local_IP}:3000/getEntry/${hash}`) // 假设此请求可能返回非文本内容
.then(response => {
if (!response.ok) {
throw new Error('网络请求失败，状态码: ' + response.status);
}
// 关键：返回 response.blob() 的 Promise
return response.blob();
})
.then(blob => {
// 在这里获取到解析后的 Blob 对象
console.log('获取到的Blob对象:', blob);
console.log('Blob类型:', blob.type);
console.log('Blob大小:', blob.size);
// 如果需要将 Blob 内容读取为文本，可以使用 FileReader API
if (blob.type.startsWith('text/')) {
const reader = new FileReader();
reader.onload = () => {
console.log('Blob内容（作为文本）:', reader.result);
};
reader.readAsText(blob);
}
})
.catch(error => {
console.error('Fetch 请求出错:', error);
});关键注意事项与常见陷阱
-
响应体流只能读取一次：Response 对象中的 body 是一个可读流，这意味着 response.text()、response.json() 或 response.blob() 这些方法只能被调用一次。一旦调用，响应流就被消耗了。如果尝试多次调用，或者在返回 response.text() 之前先 console.log(response.text())，将会导致 TypeError: Body has already been used 或 Already read 错误。
错误示例：
fetch(URL) .then(response => { console.log(response.text()); // 第一次读取，消耗流 return response.text(); // 第二次读取，会报错！ }) .then(data => console.log(data)) .catch(error => console.error(error));正确做法：
fetch(URL) .then(response => { return response.text(); // 只调用一次并返回其 Promise }) .then(data => { console.log(data); // 在这里处理解析后的数据 }) .catch(error => console.error(error)); -
始终检查 response.ok 或 response.status：fetch API 的 Promise 只有在网络错误（如断网）或请求被阻止时才会被 reject。对于 HTTP 状态码为 4xx 或 5xx 的响应，fetch 的 Promise 仍然会 resolve，但 response.ok 属性会是 false。因此，务必在处理响应数据之前检查 response.ok 或 response.status 来判断请求是否成功。
fetch(URL) .then(response => { if (!response.ok) { // 如果状态码不是 2xx，抛出错误 throw new Error(`HTTP 错误！状态码: ${response.status}`); } return response.json(); }) .then(data => { // 处理成功数据 }) .catch(error => { // 捕获网络错误或自定义抛出的 HTTP 错误 console.error('请求失败:', error); }); 请求方法和头部信息的一致性： 确保客户端的 fetch 请求方法（GET、POST 等）和头部信息（如 Content-Type、Accept）与服务器端期望的一致。例如，如果服务器是一个 GET 端点并返回纯文本，客户端就不应该使用 POST 方法并发送 Content-Type: application/json 头部，这可能导致不必要的复杂性或错误。
总结
正确处理 fetch API 的响应是构建健壮 Web 应用的关键。核心在于理解 Response 对象的流式特性，并根据服务器返回的数据类型选择合适的解析方法 (.text()、.json()、.blob())。务必将这些解析方法的 Promise 返回，以便在后续的 .then() 链中获取到最终解析的数据。同时，不要忘记检查响应状态和实现全面的错误处理，以应对各种网络和服务器响应情况。通过遵循这些最佳实践，可以有效避免常见的 fetch 响应处理问题，并确保数据交互的流畅与可靠。
