深入理解 Fetch API 响应处理：从 Blob 到文本的正确姿势-js教程-PHP中文网

深入理解 Fetch API 响应处理：从 Blob 到文本的正确姿势

本教程旨在解决使用 javascript `fetch api` 从服务器获取数据时常见的响应解析问题，特别是当预期为纯文本但实际获取到 `blob` 对象的情况。文章将详细阐述 `fetch api` 响应对象的处理机制，包括 `response.text()`、`response.json()` 和 `response.blob()` 方法的正确使用，以及如何避免“响应体已读取”等常见错误，确保数据能够被准确地解析和利用。

在现代 Web 开发中，Fetch API 已经成为进行网络请求的主流方式。它提供了一种强大而灵活的机制来替代传统的 XMLHttpRequest。然而，在使用 Fetch API 处理服务器响应时，开发者常常会遇到一些挑战，尤其是当服务器返回的数据类型与客户端预期不符，或未能正确解析响应体时。本教程将聚焦于如何正确地从 Fetch 响应中提取所需数据，特别是当服务器返回的是简单文本时。

Fetch API 基础与响应处理

Fetch API 返回一个 Promise，该 Promise 在网络请求完成后解析为一个 Response 对象。Response 对象包含了请求的元数据（如状态码、头部信息等）以及响应体。要获取响应体的内容，我们需要调用 Response 对象上的特定方法，这些方法同样返回 Promise：

response.text(): 将响应体解析为纯文本字符串。适用于服务器返回 HTML、XML 或其他纯文本数据。
response.json(): 将响应体解析为 JSON 对象。适用于服务器返回 JSON 格式的数据。
response.blob(): 将响应体解析为 Blob 对象。适用于处理二进制数据，如图片、文件等。
response.arrayBuffer(): 将响应体解析为 ArrayBuffer。适用于更底层的二进制数据操作。
response.formData(): 将响应体解析为 FormData 对象。适用于处理表单数据。

选择正确的解析方法是至关重要的一步，它取决于服务器实际返回的数据类型。

常见问题：响应体只可读取一次

在使用 Fetch API 时，一个非常常见的陷阱是尝试多次读取同一个 Response 对象的响应体。Response 对象的响应体是一个可读流，它只能被消费一次。一旦调用了 response.text()、response.json() 或 response.blob() 等方法，响应流就会被读取并关闭，后续再次调用这些方法将会抛出错误，通常是“TypeError: Body has already been used”或类似的提示。

考虑以下错误的示例模式：

fetch(url)
  .then(response => {
    // 错误示范：这里尝试读取响应体并打印，但没有返回其Promise
    console.log(response.text()); // 这会启动读取，但其Promise未被链式处理
    return response.blob(); // 再次尝试读取，可能导致“Body has already been used”
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

登录后复制

正确的做法是确保在 then 块中，你返回了 response 对象上解析方法的 Promise，这样下一个 then 块才能接收到解析后的数据。

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 正确示范：返回response.text()的Promise，以便下一个then()处理其结果
    return response.text(); // 如果预期是文本，使用 text()
  })
  .then(data => {
    // 这里可以直接使用解析后的文本数据
    console.log("接收到的文本数据:", data);
  })
  .catch(error => {
    console.error('Fetch操作失败:', error);
  });

登录后复制

选择正确的响应解析方法：从 Blob 到文本的转换

在实际开发中，如果服务器返回的是一个简单的字符串（例如 "Val is val1"），但客户端的 fetch 请求却意外地得到了一个 Blob 对象，这通常意味着你使用了 response.blob() 来解析一个本应是文本的响应。

原始问题中的 Express 服务器代码如下：

app.get('/getEntry/:key', (req, res) => {
  const entryValue = getEntry(req.params.key); // 假设 getEntry 返回一个字符串
  res.send(entryValue); // Express 的 res.send() 默认会根据内容设置 Content-Type
});

登录后复制

当 entryValue 是一个字符串时，res.send() 通常会设置 Content-Type: text/html; charset=utf-8 或 text/plain。在这种情况下，客户端应该使用 response.text() 来正确解析响应。

Docky AI

多合一AI浏览器助手，解答问题、绘制图片、阅读文档、强化搜索结果、辅助创作

查看详情

以下是针对上述场景的正确客户端 fetch 代码：

const local_IP = 'YOUR_LOCAL_IP'; // 替换为你的本地IP
const hash = 'Asfa'; // 替换为你的键

fetch(`http://${local_IP}:3000/getEntry/${hash}`, {
    method: 'GET', // 对应 Express 的 app.get()，应使用 GET 方法
    headers: {
      'Accept': 'text/plain, text/html', // 告知服务器客户端接受文本或HTML
    },
    cache: 'default'
  })
  .then(response => {
    if (response.ok) {
      // 服务器返回的是纯文本，所以应该使用 response.text()
      // 注意：response.headers.get('Content-Type') 可以帮助判断实际类型
      console.log('Content-Type:', response.headers.get('Content-Type'));
      return response.text(); // 返回解析为文本的 Promise
    } else {
      throw new Error('Error: ' + response.status + ' ' + response.statusText);
    }
  })
  .then(textData => {
    // textData 现在就是你期望的字符串 "Val is val1"
    console.log("成功获取到期望的字符串:", textData);
  })
  .catch(error => {
    console.error('Fetch操作失败:', error);
  });

登录后复制

关键点总结：

方法匹配：客户端 fetch 请求的 method 应该与服务器路由定义的方法（app.get, app.post 等）相匹配。如果服务器是 app.get，客户端应使用 method: 'GET'。
选择正确的解析器：根据服务器返回数据的实际类型（可以通过查看 Response 对象的 headers.get('Content-Type') 来辅助判断），选择 response.text()、response.json() 或 response.blob()。对于简单的字符串，response.text() 是最合适的。
Promise 链式处理：在 then 块中，务必 return 解析方法（如 response.text()）返回的 Promise，以确保其结果能够传递到下一个 then 块。
错误处理：始终检查 response.ok 属性来判断 HTTP 请求是否成功（状态码在 200-299 之间），并在请求失败时抛出错误，以便 catch 块能够捕获并处理。

完整示例与注意事项

为了更好地演示，我们提供一个完整的服务器和客户端代码示例。

Express 服务器 (server.js)

const express = require('express');
const cors = require('cors'); // 引入 cors 中间件
const app = express();
const port = 3000;

// 允许所有来源的跨域请求，实际项目中应配置白名单
app.use(cors());

// 模拟数据存储
const dataStore = {
  'Asfa': 'Val is val1',
  'key2': 'Another value here'
};

// GET 请求路由，返回纯文本
app.get('/getEntry/:key', (req, res) => {
  const key = req.params.key;
  const value = dataStore[key] || `No value found for key: ${key}`;
  // res.send() 会根据内容自动设置 Content-Type，对于字符串通常是 text/html 或 text/plain
  res.send(value);
});

// 启动服务器
app.listen(port, '0.0.0.0', () => { // 监听所有网络接口
  console.log(`Express server running at http://0.0.0.0:${port}`);
});

登录后复制

客户端 JavaScript (client.js 或嵌入 HTML)

document.addEventListener('DOMContentLoaded', () => {
  const fetchButton = document.getElementById('fetchData');
  const resultDiv = document.getElementById('result');
  const ipInput = document.getElementById('localIp');
  const keyInput = document.getElementById('keyToFetch');

  fetchButton.addEventListener('click', async () => {
    const local_IP = ipInput.value;
    const key = keyInput.value;
    const url = `http://${local_IP}:${port}/getEntry/${key}`; // 注意端口号与服务器一致

    resultDiv.textContent = '正在获取数据...';
    resultDiv.style.color = 'black';

    try {
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          'Accept': 'text/plain, text/html',
        },
        cache: 'no-cache' // 避免缓存问题
      });

      if (!response.ok) {
        throw new Error(`HTTP 错误! 状态码: ${response.status}`);
      }

      // 获取 Content-Type，辅助判断
      const contentType = response.headers.get('Content-Type');
      console.log('服务器响应 Content-Type:', contentType);

      // 根据 Content-Type 或预期类型选择解析方法
      if (contentType && contentType.includes('application/json')) {
        const jsonData = await response.json();
        resultDiv.textContent = `JSON 数据: ${JSON.stringify(jsonData)}`;
      } else {
        const textData = await response.text();
        resultDiv.textContent = `文本数据: ${textData}`;
      }

      resultDiv.style.color = 'green';

    } catch (error) {
      console.error('Fetch 操作失败:', error);
      resultDiv.textContent = `错误: ${error.message}`;
      resultDiv.style.color = 'red';
    }
  });
});

登录后复制

客户端 HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API 示例</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        input, button { margin-right: 10px; padding: 8px; }
        #result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; min-height: 50px; }
    </style>
</head>
<body>
    <h1>Fetch API 数据获取</h1>
    <div>
        <label for="localIp">服务器 IP:</label>
        <input type="text" id="localIp" value="127.0.0.1" placeholder="例如: 127.0.0.1">
    </div>
    <div style="margin-top: 10px;">
        <label for="keyToFetch">键名:</label>
        <input type="text" id="keyToFetch" value="Asfa" placeholder="例如: Asfa">
        <button id="fetchData">获取数据</button>
    </div>
    <div id="result"></div>

    <script src="client.js"></script>
</body>
</html>

登录后复制

注意事项：

跨域 (CORS)：在上述 Express 服务器中，使用了 cors 中间件来允许跨域请求。在生产环境中，应更精细地配置 cors，只允许受信任的来源访问。
错误处理：健壮的错误处理是任何网络请求的关键。fetch 的 catch 块只会捕获网络错误或 then 块中抛出的错误，而不会捕获 HTTP 错误响应（如 404, 500）。因此，检查 response.ok 是非常重要的。
异步/等待 (async/await)：使用 async/await 语法可以使 Promise 链式调用更具可读性，尤其是在处理多个异步操作时。

通过理解 Fetch API 的响应处理机制，并遵循正确的解析方法和 Promise 链式处理原则，开发者可以有效地避免常见问题，确保应用程序能够准确、可靠地与后端服务进行数据交互。

以上就是深入理解 Fetch API 响应处理：从 Blob 到文本的正确姿势的详细内容，更多请关注php中文网其它相关文章！