本文旨在解决使用javascript fetch api从koa后端获取数据时遇到的常见问题。我们将详细讲解当koa后端成功发送数据，但前端无法正确接收和显示时，如何通过正确解析fetch响应体来解决。教程将涵盖koa后端设置、前端fetch请求的正确实现方式，包括响应解析（如`res.json()`）和错误处理，确保开发者能够顺利地在客户端获取到服务器返回的数据。
在现代Web开发中，前端与后端的数据交互是核心功能之一。JavaScript的Fetch API提供了一种现代、灵活的方式来发送网络请求。然而，初学者在使用Fetch从后端（如Koa应用）获取数据时，常常会遇到一个常见误区：即使后端已成功发送响应，前端却未能正确地提取和显示响应体中的数据。本教程将深入探讨这一问题，并提供一个完整的解决方案。
Koa后端设置示例
首先，我们来看一个简单的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 sending:", result); // 后端控制台输出
ctx.body = result; // 将结果作为响应体发送
});
app.use(_.routes()); // 注册路由
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});在这个Koa应用中，当客户端向http://localhost:3000/发起GET请求时，服务器会返回字符串"good morning"。ctx.body = result; 负责将数据放入HTTP响应体。
前端Fetch请求的常见误区
许多开发者在前端使用Fetch时，可能会编写如下代码：
submitButton.addEventListener('click', async () => {
fetch(`http://localhost:3000/`)
.then(res => console.log(res)); // 直接打印响应对象
});当执行这段代码并点击按钮时，你可能会发现后端控制台正确打印了"Backend sending: good morning"，但前端控制台并没有如预期般打印"good morning"，而是打印了一个Response对象，例如：
Response {type: 'cors', url: 'http://localhost:3000/', redirected: false, status: 200, ok: true, ...}这是因为fetch返回的Promise在成功时解析为一个Response对象，而不是响应体中的实际数据。Response对象包含了响应的元数据（如状态码、头部信息等），但其主体内容（即服务器发送的"good morning"）是作为可读流存在的，需要显式地进行解析。
正确解析Fetch响应体
要从Response对象中提取实际的数据，你需要调用其提供的方法来解析响应体。常用的解析方法包括：
- res.json(): 如果响应体是JSON格式。
- res.text(): 如果响应体是纯文本格式。
- res.blob(): 如果响应体是二进制大对象（如图片）。
- res.arrayBuffer(): 如果响应体是二进制数据。
对于本例，Koa后端返回的是一个字符串"good morning"，它在技术上是纯文本。然而，在许多Web API交互中，即使是简单的字符串也常被包装成JSON格式，或者为了通用性，前端常常默认尝试解析为JSON。如果后端明确返回纯文本且不打算作为JSON处理，使用res.text()会更准确。但如果期望后端返回的数据可以被解释为JSON（例如，一个包含字符串的JSON对象{"message": "good morning"}），那么res.json()是更常见的选择，并且它能自动处理字符串到JSON对象的转换（如果响应是有效的JSON字符串）。
考虑到"good morning"是一个简单的字符串，如果后端没有设置Content-Type: application/json，res.json()可能会失败。但如果后端返回的是一个JSON字符串（即使内容只是一个字符串），res.json()是正确的选择。为了演示最常见的场景，我们假设后端返回的是一个可以被res.json()处理的响应，或者我们将其视为一个纯文本响应。
使用 res.json() 解析（常见且推荐用于JSON数据）:
submitButton.addEventListener('click', async () => {
fetch(`http://localhost:3000/`)
.then(res => res.json()) // 第一步：将响应体解析为JSON
.then(data => console.log(data)) // 第二步：处理解析后的数据
.catch(error => console.error('Fetch error:', error)); // 错误处理
});解释：
- fetch(...).then(res => res.json()): res.json()方法返回一个新的Promise，它会在响应体被完全读取并解析为JSON后解析。如果解析失败（例如，响应不是有效的JSON），这个Promise将会被拒绝。
- .then(data => console.log(data)): 只有当res.json()返回的Promise成功解析后，这个.then()块才会被执行。此时，data变量将包含从服务器获取到的实际JSON数据（或解析后的JavaScript对象）。
- .catch(error => console.error('Fetch error:', error)): 这是一个关键的错误处理步骤。如果在fetch请求过程中发生网络错误，或者res.json()解析失败，catch块将捕获这些错误，并允许你进行适当的错误处理，例如向用户显示错误消息。
使用 res.text() 解析（适用于纯文本数据）:
如果后端明确只返回纯文本，不打算作为JSON处理，那么使用res.text()会更直接：
submitButton.addEventListener('click', async () => {
fetch(`http://localhost:3000/`)
.then(res => res.text()) // 将响应体解析为纯文本
.then(text => console.log(text)) // 处理解析后的文本
.catch(error => console.error('Fetch error:', error)); // 错误处理
});在这种情况下，text变量将直接是"good morning"。
总结与注意事项
- 解析响应体是关键： fetch API返回的是一个Response对象，你需要显式调用res.json()、res.text()等方法来提取实际的数据内容。
- 选择正确的解析方法： 根据后端返回的数据类型（JSON、文本、二进制等）选择合适的解析方法。
- 链式调用Promise： res.json()和res.text()本身也返回Promise，因此需要使用.then()进行链式调用来处理解析后的数据。
- 错误处理不可忽视： 始终使用.catch()来捕获网络请求或数据解析过程中可能发生的错误，这对于构建健壮的应用至关重要。
- CORS配置： 确保你的Koa后端正确配置了CORS（如本例中的koa2-cors），否则前端的跨域请求可能会被浏览器阻止。
通过遵循这些步骤，你将能够有效地使用Fetch API从Koa或其他后端应用中获取并处理数据，从而构建功能完善的Web应用程序。
