`fetch` API 在现代 Web 开发中扮演着核心角色，但其响应处理机制，特别是对响应体（如文本、JSON、Blob）的流式读取，常是开发者遇到的难题。本文将详细解析 `fetch` 响应的正确解析方法，指导如何根据后端（以 Express 为例）返回的数据类型选择合适的客户端解析函数，并避免“Already read”等常见错误，确保数据被准确获取和使用。
引言：fetch API 与数据获取
fetch API 提供了一种现代、灵活的方式来在浏览器中执行 HTTP 请求。它基于 Promise，使得异步网络请求的处理更加简洁。然而，理解 fetch 返回的 Response 对象及其数据流处理方式是正确获取数据的关键。许多开发者在尝试从 Response 对象中提取数据时会遇到困惑，尤其是在处理不同数据类型（如纯文本、JSON 或二进制数据）时。
后端 API 示例：Express 快速搭建
为了演示 fetch 的响应处理，我们首先构建一个简单的 Express 后端 API。这个 API 仅根据请求参数返回一个字符串。
const express = require('express');
const app = express();
const port = 3000;
// 假设 getEntry 是一个返回字符串的函数
const getEntry = (key) => {
// 实际应用中这里会根据 key 从数据库或其他地方获取数据
return `Val is ${key}`;
};
// 定义一个 GET 路由，根据 :key 返回一个字符串
app.get('/getEntry/:key', (req, res) => {
const entryValue = getEntry(req.params.key);
// res.send() 默认会根据内容类型自动设置 Content-Type，对于字符串通常是 text/html
res.send(entryValue);
});
app.listen(port, () => {
console.log(`Express server listening at http://localhost:${port}`);
});在这个例子中，当客户端请求 /getEntry/val1 时，服务器将返回字符串 "Val is val1"，并且响应的 Content-Type 通常会被设置为 text/html; charset=utf-8。
立即学习“前端免费学习笔记（深入）”；
前端 fetch 请求的常见误区与优化
在客户端使用 fetch 请求上述 Express API 时，一些常见的配置错误会导致无法正确解析响应：
- 请求方法不匹配： 后端定义的是 app.get 路由，但前端却使用了 Method: 'POST'。HTTP 请求方法必须与后端路由定义的方法一致。
- 不必要的请求头： 对于一个简单的 GET 请求，且后端返回的是纯文本，设置 Accept: 'application.json' 和 Content-Type: 'application/json' 是不必要的，甚至可能误导服务器（尽管 Express 在 res.send() 字符串时通常会忽略这些）。
下面是一个存在上述问题的 fetch 请求示例：
const local_IP = 'localhost'; // 假设你的服务器在本地
const hash = 'Asfa'; // 示例参数
fetch(`http://${local_IP}:3000/getEntry/${hash}`, {
Method: 'POST', // 错误：应为 GET
Headers: {
Accept: 'application.json', // 错误：后端返回 text/html
'Content-Type': 'application/json' // 错误：后端返回 text/html
},
Cache: 'default'
})
.then(response => {
// ... 后续处理
});优化后的 fetch 请求配置：
由于后端是 GET 请求且返回纯文本，我们可以简化 fetch 调用，移除不必要的 Method 和 Headers 配置。fetch 默认就是 GET 请求。
fetch(`http://${local_IP}:3000/getEntry/${hash}`)
.then(response => {
// ... 后续处理
});理解 fetch 响应体：流式读取机制
fetch 返回的 Response 对象是一个可读流。这意味着其响应体（body）只能被读取一次。Response 对象提供了多种方法来解析响应体，例如：
- response.text(): 将响应体解析为字符串。
- response.json(): 将响应体解析为 JSON 对象。
- response.blob(): 将响应体解析为 Blob 对象（二进制大对象）。
- response.arrayBuffer(): 将响应体解析为 ArrayBuffer。
- response.formData(): 将响应体解析为 FormData 对象。
核心要点：
- 返回 Promise： 这些解析方法都是异步的，它们会返回一个 Promise，该 Promise 在响应体被完全读取并解析后解决。
- 一次性读取： 一旦你调用了 response.text()、response.json() 或 response.blob() 中的任何一个，响应体就被“消费”了。你不能再次调用另一个解析方法，否则会抛出“TypeError: Body has already been used”或类似的错误。
- 链式调用： 为了正确处理异步解析，必须将解析方法的 Promise 从 .then() 块中 return 出去，以便下一个 .then() 块能够接收到解析后的数据。
正确解析 fetch 响应体
针对我们 Express 后端返回的纯字符串（Content-Type: text/html），最合适的客户端解析方法是 response.text()。
让我们看看如何正确地实现它：
const local_IP = 'localhost'; // 假设你的服务器在本地
const hash = 'Asfa'; // 示例参数
fetch(`http://${local_IP}:3000/getEntry/${hash}`)
.then(response => {
// 1. 检查 HTTP 状态码，确保请求成功
if (!response.ok) {
// 如果状态码不是 2xx，抛出错误
throw new Error(`HTTP Error: ${response.status} - ${response.statusText}`);
}
// 2. 关键：根据后端 Content-Type，返回对应的解析方法 Promise
// 由于后端返回的是字符串 (text/html)，我们使用 response.text()
return response.text(); // 返回一个 Promise
})
.then(data => {
// 3. 在这里处理解析后的数据
// data 现在就是我们期望的字符串 "Val is Asfa"
console.log("成功获取数据:", data);
// 例如：将其显示在页面上
// document.getElementById('output').textContent = data;
})
.catch(error => {
// 4. 捕获网络错误或解析错误
console.error('Fetch Error:', error);
});为什么 response.blob() 在此场景不适用？
在原始问题中，开发者尝试使用 response.blob()，并得到了一个 Blob 对象：
{"_data": {"__collector": {}, "blobId": "...", "name": "Asfa.html", "offset": 0, "size": 11, "type": "text/html"}}虽然成功获取了 Blob 对象，但这个 Blob 对象本身并不是原始的字符串。它是一个二进制数据容器。要从 Blob 中提取字符串，还需要额外的步骤，例如使用 FileReader API：
// 如果你确实需要先获取 Blob，然后转换为文本
.then(blob => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsText(blob); // 将 Blob 读取为文本
});
})
.then(text => {
console.log("从 Blob 转换后的文本:", text);
})显然，对于后端直接返回字符串的情况，直接使用 response.text() 更加简洁高效。
response.json() 的使用场景
如果你的 Express 后端返回的是 JSON 数据，例如：
app.get('/getJsonEntry/:key', (req, res) => {
res.json({ value: `Val is ${req.params.key}` }); // 返回 JSON
});那么在前端，你就应该使用 response.json() 来解析：
fetch(`http://${local_IP}:3000/getJsonEntry/${hash}`)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`);
}
return response.json(); // 返回一个 Promise，解析为 JavaScript 对象
})
.then(jsonObject => {
console.log("成功获取 JSON 数据:", jsonObject); // { value: "Val is Asfa" }
console.log("值:", jsonObject.value);
})
.catch(error => {
console.error('Fetch Error:', error);
});注意事项与最佳实践
- 匹配 Content-Type： 始终确保客户端的响应解析方法（.text()、.json()、.blob() 等）与服务器实际返回的 Content-Type HTTP 头相匹配。这是避免解析错误的关键。
- 一次性读取： 记住 Response 对象的 body 只能读取一次。避免在同一个 .then() 块中尝试多次读取或同时调用多个解析方法。
- Promise 链式调用： response.text()、response.json() 等方法都返回 Promise。务必从 .then() 回调中 return 这些 Promise，以便后续的 .then() 能够接收到解析后的数据。
-
错误处理：
- 网络错误： fetch 只有在网络请求失败（例如，无网络连接、DNS 解析失败）时才会拒绝 Promise，进入 .catch() 块。
- HTTP 错误： 对于像 404 Not Found 或 500 Internal Server Error 这样的 HTTP 错误状态码，fetch 的 Promise 仍然会解决（resolve），但 response.ok 属性会是 false。因此，在 .then() 块中检查 response.ok 是非常重要的。
- 解析错误： 如果尝试用 response.json() 解析一个非 JSON 格式的响应，会抛出解析错误，进入 .catch() 块。
- CORS（跨域资源共享）： 如果前端应用和后端 API 部署在不同的域、端口或协议上，可能会遇到 CORS 问题。确保后端正确配置了 CORS 头（例如使用 cors Express 中间件）。
总结
正确处理 fetch API 的响应是构建健壮 Web 应用的基础。核心在于理解 Response 对象的流式特性和一次性读取原则，并根据后端 Content-Type 选择合适的解析方法（text()、json()、blob() 等）。通过遵循这些最佳实践，开发者可以有效避免常见的 fetch 响应解析问题，确保数据的顺畅获取和应用。
