在使用javascript的fetch api从koa等后端应用获取数据时，开发者常遇到的一个误区是直接打印fetch返回的`response`对象而无法看到实际数据。本文将深入讲解如何正确地解析fetch api的响应体，通过`.then(res => res.json())`等方法将http响应转换为可用的javascript数据格式，并提供完整的koa后端与fetch前端示例，确保您能成功获取并处理从服务器返回的数据，同时强调错误处理和最佳实践。
当您使用Fetch API发起一个HTTP请求后，它会返回一个Promise，该Promise在请求成功（即使是HTTP错误如404）时会resolve为一个Response对象。这个Response对象包含了HTTP响应的所有元数据，如状态码、头部信息等，但不直接包含响应体（即服务器实际发送的数据）。响应体是一个可读流（ReadableStream），需要通过特定的方法才能将其提取并转换为可用的JavaScript数据格式。
首先，我们来看一个简单的Koa后端应用，它在接收到GET请求时返回一个字符串：
const koa = require('koa');
const router = require('koa-router');
const cors = require('koa2-cors'); // 用于处理跨域请求
const app = new koa();
app.use(cors()); // 启用CORS中间件
const _ = router();
const port = 3000;
// 定义一个GET路由，返回"good morning"
_.get('/', async (ctx) => {
const result = "good morning";
console.log(`Backend received request, sending: ${result}`); // 后端控制台输出
ctx.body = result; // 设置响应体
});
app.use(_.routes()); // 注册路由
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});这个Koa应用在/路径上监听GET请求，并将其ctx.body设置为字符串"good morning"。koa2-cors中间件的启用对于前端在不同域名下访问后端至关重要。
许多开发者在初次使用Fetch API时，可能会尝试直接打印fetch Promise resolve后的Response对象，如下所示：
// 错误示例：无法直接获取响应数据
submitButton.addEventListener('click', async () => {
fetch(`https://www.php.cn/link/dc3f973a721454c7ca263f9b70bfd7a5`)
.then(res => console.log(res)); // 这里只会打印Response对象，而不是"good morning"
});在这种情况下，前端控制台会输出一个Response对象，其中包含status、headers、url等信息，但您不会直接看到后端发送的"good morning"字符串。这是因为res变量本身是一个Response对象，其数据体尚未被解析。
要正确获取响应体中的数据，您需要调用Response对象提供的方法来解析数据流。最常用的方法是res.json()（用于解析JSON数据）和res.text()（用于解析纯文本数据）。这些方法同样返回Promise，您需要再次使用.then()来处理解析后的数据。
以下是正确处理Fetch响应的示例：
// 正确示例：解析并获取响应数据
submitButton.addEventListener('click', async () => {
fetch(`https://www.php.cn/link/dc3f973a721454c7ca263f9b70bfd7a5`)
.then(res => {
// 步骤1：检查HTTP响应状态，确保请求成功
if (!res.ok) {
// 如果HTTP状态码不是2xx，抛出错误
throw new Error(`HTTP error! status: ${res.status}`);
}
// 步骤2：解析响应体为纯文本（因为后端返回的是字符串）
return res.text();
})
.then(data => {
// 步骤3：处理解析后的数据
console.log("Frontend received data:", data); // 输出："Frontend received data: good morning"
alert(`Received from server: ${data}`); // 也可以使用alert显示
})
.catch(error => {
// 步骤4：捕获并处理请求或解析过程中发生的错误
console.error("There was a problem with the fetch operation:", error);
alert(`Error: ${error.message}`);
});
});代码解析：
Fetch API的Response对象提供了多种方法来解析不同类型的响应体：
选择正确的解析方法取决于后端返回的数据类型。
始终解析响应体： 记住fetch返回的Response对象不直接包含数据，需要调用res.json()、res.text()等方法来提取。
错误处理： 使用.catch()来捕获网络错误或解析错误。同时，在第一个.then()中检查res.ok或res.status来处理HTTP级别的错误（如404 Not Found, 500 Internal Server Error），因为即使是HTTP错误，Fetch的Promise也会resolve而不是reject。
CORS策略： 如果前端和后端运行在不同的域名、端口或协议上，后端必须配置CORS（跨域资源共享）策略，否则浏览器会阻止前端请求。本教程中的Koa应用已通过koa2-cors进行了配置。
异步/等待 (async/await) 语法： 对于更简洁的异步代码，可以使用async/await语法重写上述Fetch操作：
submitButton.addEventListener('click', async () => {
try {
const response = await fetch(`https://www.php.cn/link/dc3f973a721454c7ca263f9b70bfd7a5`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.text(); // 或 response.json()
console.log("Frontend received data:", data);
alert(`Received from server: ${data}`);
} catch (error) {
console.error("There was a problem with the fetch operation:", error);
alert(`Error: ${error.message}`);
}
});async/await使异步代码看起来更像同步代码，提高了可读性。try...catch块用于捕获所有潜在的错误。
正确使用Fetch API从Koa或其他后端应用获取数据，关键在于理解Response对象的工作原理，并利用其提供的解析方法（如res.json()或res.text()）来提取实际的响应体数据。结合适当的错误处理和async/await语法，您可以构建出健壮且易于维护的前端数据请求逻辑。务必记住，在处理Fetch响应时，检查HTTP状态码和解析响应体是不可或缺的两个步骤。
以上就是使用Fetch API从Koa应用获取数据：正确处理响应体的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
216
收藏
