在使用javascript的fetch api从koa等后端应用获取数据时，开发者常遇到的一个误区是直接打印fetch返回的`response`对象而无法看到实际数据。本文将深入讲解如何正确地解析fetch api的响应体，通过`.then(res => res.json())`等方法将http响应转换为可用的javascript数据格式，并提供完整的koa后端与fetch前端示例，确保您能成功获取并处理从服务器返回的数据，同时强调错误处理和最佳实践。
理解Fetch API的响应处理机制
当您使用Fetch API发起一个HTTP请求后，它会返回一个Promise，该Promise在请求成功（即使是HTTP错误如404）时会resolve为一个Response对象。这个Response对象包含了HTTP响应的所有元数据，如状态码、头部信息等，但不直接包含响应体（即服务器实际发送的数据）。响应体是一个可读流（ReadableStream），需要通过特定的方法才能将其提取并转换为可用的JavaScript数据格式。
示例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 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请求的常见误区与正确处理
许多开发者在初次使用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(https://www.php.cn/link/dc3f973a721454c7ca263f9b70bfd7a5): 发起GET请求到Koa后端。
-
.then(res => { ... }): 第一个.then()回调接收Response对象。
- if (!res.ok): 这是一个重要的检查。res.ok属性是一个布尔值，表示HTTP响应状态码是否在200-299的成功范围内。在实际应用中，您应该始终检查此属性，以区分网络错误、服务器错误和成功的响应。
- return res.text();: 由于我们的Koa后端返回的是一个纯字符串"good morning"，我们使用res.text()方法来将其解析为JavaScript字符串。如果后端返回的是JSON格式的数据（例如ctx.body = { message: "good morning" }），则应使用return res.json();。
- .then(data => { ... }): 第二个.then()回调接收上一步res.text()或res.json()解析后的数据。此时，data变量就包含了从后端获取的实际数据（例如"good morning"）。
- .catch(error => { ... }): 这是一个Promise链中的错误处理机制。它可以捕获在fetch操作本身、网络问题、或任何.then()回调中抛出的错误。
常见的响应解析方法
Fetch API的Response对象提供了多种方法来解析不同类型的响应体：
- res.json(): 将响应体解析为JSON对象。这是最常用的方法，适用于RESTful API。
- res.text(): 将响应体解析为纯文本字符串。适用于返回HTML、XML或简单字符串的API。
- res.blob(): 将响应体解析为Blob对象。适用于处理文件、图片等二进制数据。
- res.arrayBuffer(): 将响应体解析为ArrayBuffer。适用于更底层的二进制数据处理。
- res.formData(): 将响应体解析为FormData对象。适用于接收表单数据。
选择正确的解析方法取决于后端返回的数据类型。
注意事项与最佳实践
始终解析响应体： 记住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状态码和解析响应体是不可或缺的两个步骤。
