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

// 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:${port}`);
});

// 错误的客户端请求示例：方法不匹配
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);
});

// 客户端错误示例：未正确处理 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);
});

// 客户端错误示例：多次读取响应体
fetch(`http://${local_IP}:3000/getEntry/${hash}`)
.then(response => {
    console.log(response.text()); // 第一次读取
    return response.json();       // 第二次读取，会导致错误！
})
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error('Error:', error); // 这里会捕获到 "Body has already been consumed" 错误
});

// client.js - 正确解析文本数据
const local_IP = 'localhost';
const hash = 'Asfa';

fetch(`http://${local_IP}:3000/getEntry/${hash}`) // 默认是 GET 方法
    .then(response => {
        // 检查 HTTP 响应状态码，确保请求成功 (2xx 范围)
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        // 返回 response.text() 的 Promise，下一个 .then 将接收到解析后的字符串
        return response.text();
    })
    .then(data => {
        // 'data' 现在是服务器返回的纯字符串 "Val is val1"
        console.log("Desired response (text):", data); // 输出: Desired response (text): Val is val1
    })
    .catch(error => {
        console.error("Fetch error:", error);
    });

// server.js - 假设服务器返回 JSON
app.get('/getJsonEntry/:key', (req, res) => {
    const key = req.params.key;
    const value = dataStore[key] || `No entry found for key "${key}"`;
    res.json({ key: key, value: value }); // 返回 JSON 对象
});

// client.js - 解析 JSON 数据
fetch(`http://${local_IP}:3000/getJsonEntry/${hash}`)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        // 返回 response.json() 的 Promise
        return response.json();
    })
    .then(data => {
        // 'data' 现在是解析后的 JavaScript 对象，例如 { key: "Asfa", value: "Val is val1" }
        console.log("Desired response (JSON):", data);
        console.log("Value from JSON:", data.value);
    })
    .catch(error => {
        console.error("Fetch error:", error);
    });

// client.js - 解析二进制数据 (Blob)
// 假设服务器返回一张图片或一个文件
fetch(`http://${local_IP}:3000/getImage/example.png`)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        // 返回 response.blob() 的 Promise
        return response.blob();
    })
    .then(blob => {
        // 'blob' 是一个 Blob 对象
        console.log("Received Blob object:", blob);
        // 可以通过 URL.createObjectURL(blob) 创建一个临时 URL 来显示图片或下载文件
        const imageUrl = URL.createObjectURL(blob);
        console.log("Image URL:", imageUrl);
        // 示例：将图片显示在页面上
        // const img = document.createElement('img');
        // img.src = imageUrl;
        // document.body.appendChild(img);
    })
    .catch(error => {
        console.error("Fetch error:", error);
    });