深入理解 Fetch API：正确解析 HTTP 响应数据

fetch api 是现代 web 开发中用于进行网络请求的核心工具。本文将详细探讨 fetch 请求后如何正确解析不同类型的 http 响应体，包括文本、json 和二进制数据。我们将重点解决常见的响应体解析误区，特别是异步处理和一次性读取的特性，并通过实际代码示例指导读者高效地获取并处理服务器返回的期望数据。

在前端与后端进行数据交互时，Fetch API 已经成为主流的异步请求方式。然而，许多开发者在初次使用 Fetch 时，可能会遇到无法正确获取或解析服务器响应的问题。这通常源于对 Fetch 响应处理机制的误解，特别是对响应体（Response Body）的异步读取和一次性消费特性的认识不足。本教程将深入解析这些关键概念，并提供清晰的实践指南。

服务端基础：构建一个简单的 Express 接口

为了更好地理解客户端如何处理响应，我们首先搭建一个简单的 Node.js Express 服务器，它将提供一个 GET 接口，返回一个纯文本字符串。

// server.js
const express = require('express');
const app = express();
const port = 3000;

// 模拟数据存储
const dataStore = {
    'Asfa': 'Val is val1',
    'anotherKey': 'This is another value'
};

// 定义一个 GET 接口，根据 key 返回对应的字符串值
app.get('/getEntry/:key', (req, res) => {
    const key = req.params.key;
    const value = dataStore[key] || `Error: No entry found for key "${key}"`;
    // 使用 res.send() 发送字符串作为响应体
    res.send(value);
});

// 启动服务器
app.listen(port, () => {
    console.log(`Express server running at http://localhost:$
`);
});

登录后复制

运行此服务器后，访问 http://localhost:3000/getEntry/Asfa，浏览器会直接显示 Val is val1。这表明服务器正确地发送了我们期望的字符串。

客户端请求与常见误区

现在，我们尝试在客户端使用 Fetch API 来获取这个数据。许多开发者在尝试获取数据时，可能会遇到以下几种常见的误区：

误区一：HTTP 请求方法不匹配

一个常见的错误是客户端 Fetch 请求的方法与服务器端路由定义的方法不一致。例如，服务器定义的是 app.get('/getEntry/:key', ...)，但客户端 Fetch 请求却指定了 Method: 'POST'。

// 错误的客户端请求示例：方法不匹配
const local_IP = 'localhost';
const hash = 'Asfa';

fetch(`http://${local_IP}:3000/getEntry/${hash}`, {
    method: 'POST', // <-- 错误：服务器是 GET 方法
    headers: {
        'Accept': 'application/json', // 即使服务器返回文本，客户端也可能期望 JSON
        'Content-Type': 'application/json'
    },
    cache: 'default'
})
.then(response => {
    // ... 后续处理
})
.catch(error => {
    console.error('Fetch error:', error);
});

登录后复制

在这种情况下，服务器可能返回 404 Not Found 或 405 Method Not Allowed 错误，因为没有对应的 POST 路由。始终确保客户端请求方法与服务器端路由定义的方法一致。对于获取数据的场景，通常使用 GET 方法。

误区二：不理解 response.*() 方法的异步性

response.text()、response.json()、response.blob() 等方法都是异步的，它们返回的是 Promise。这意味着你不能直接在 .then() 回调中 console.log() 它们并期望立即得到解析后的数据。你需要将这些方法的返回值 return 出去，以便下一个 .then() 链能够接收到解析后的数据。

// 客户端错误示例：未正确处理 response.*() 的 Promise
fetch(`http://${local_IP}:3000/getEntry/${hash}`)
.then(response => {
    if (response.ok) {
        // 尝试在这里直接处理，但 response.blob() 仍是一个 Promise
        console.log(response.blob()); // 这会打印一个 Promise 对象，而不是解析后的数据
        return response.blob(); // 即使返回了，下一个 .then 也要正确处理 Promise
    } else {
        throw new Error('Error: ' + response.status);
    }
})
.then(blob => {
    // 此时 blob 变量可能是一个 Blob 对象，但如果服务器返回的是纯文本，
    // 你可能期望的是字符串，而不是 Blob 对象本身。
    console.log(blob); // 打印的是 Blob 对象，如 {"_data": {...}, "size": 11, "type": "text/html"}
    // 如果想要 Blob 的内容，还需要进一步读取（如使用 FileReader API）
})
.catch(error => {
    console.error('Error:', error);
});

登录后复制

上述代码中，console.log(response.blob()) 打印的是一个 Promise，而不是最终的 Blob 数据。而后续的 console.log(blob) 打印的是一个 Blob 对象，而不是其内部的字符串内容。如果服务器发送的是纯文本，我们通常期望直接得到字符串。