如何使用Fetch从Koa应用获取响应结果-js教程-PHP中文网

如何使用Fetch从Koa应用获取响应结果

花韻仙語

发布： 2025-11-27 16:15:02

原创

780人浏览过

如何使用Fetch从Koa应用获取响应结果

本文旨在解决使用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字符串）。

Spacely AI

为您的房间提供AI室内设计解决方案，寻找无限的创意

查看详情

考虑到"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），否则前端的跨域请求可能会被浏览器阻止。