`fetch` API 在现代 Web 开发中扮演着核心角色，但其响应处理机制，特别是对响应体（如文本、JSON、Blob）的流式读取，常是开发者遇到的难题。本文将详细解析 `fetch` 响应的正确解析方法，指导如何根据后端（以 Express 为例）返回的数据类型选择合适的客户端解析函数，并避免“Already read”等常见错误，确保数据被准确获取和使用。
fetch API 提供了一种现代、灵活的方式来在浏览器中执行 HTTP 请求。它基于 Promise，使得异步网络请求的处理更加简洁。然而，理解 fetch 返回的 Response 对象及其数据流处理方式是正确获取数据的关键。许多开发者在尝试从 Response 对象中提取数据时会遇到困惑，尤其是在处理不同数据类型（如纯文本、JSON 或二进制数据）时。
为了演示 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 请求上述 Express API 时，一些常见的配置错误会导致无法正确解析响应：
下面是一个存在上述问题的 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 返回的 Response 对象是一个可读流。这意味着其响应体（body）只能被读取一次。Response 对象提供了多种方法来解析响应体，例如：
核心要点：
针对我们 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()，并得到了一个 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() 更加简洁高效。
如果你的 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);
});正确处理 fetch API 的响应是构建健壮 Web 应用的基础。核心在于理解 Response 对象的流式特性和一次性读取原则，并根据后端 Content-Type 选择合适的解析方法（text()、json()、blob() 等）。通过遵循这些最佳实践，开发者可以有效避免常见的 fetch 响应解析问题，确保数据的顺畅获取和应用。
以上就是深入理解 fetch API 响应：从 Express 后端到前端的正确数据解析的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
713
收藏
