深入理解 JavaScript Fetch API：高效处理服务器响应数据

本文深入探讨 JavaScript Fetch API 在处理服务器响应时的关键技巧，重点讲解如何正确解析不同类型的响应数据（文本、JSON、Blob），以及如何避免“Already read”等常见错误。通过实例代码，帮助开发者掌握 `response.text()`、`response.json()` 和 `response.blob()` 的正确使用方式，确保高效、准确地获取和处理网络请求返回的数据。

理解 Fetch API 及其响应处理机制

JavaScript 的 fetch API 提供了一种现代、基于 Promise 的方式来发起网络请求。它返回一个 Response 对象，该对象包含了请求的元数据（如状态码、头部信息）以及一个表示响应体内容的流。直接从 Response 对象中获取所需的数据（如文本、JSON 或二进制数据）需要进一步的处理。

当服务器返回数据时，我们通常期望得到特定格式的数据，例如纯文本字符串、JSON 对象或文件（如图片、PDF 等）。fetch API 提供了不同的方法来解析这些数据流：

• response.text(): 将响应体解析为纯文本字符串。
• response.json(): 将响应体解析为 JSON 对象。
• response.blob(): 将响应体解析为 Blob 对象，常用于处理二进制数据。

这些方法都是异步的，它们返回一个 Promise，该 Promise 在数据解析完成后解析为相应的数据类型。

立即学习“Java免费学习笔记（深入）”；

正确解析 Fetch 响应数据

在使用 fetch API 时，一个常见的误区是未能正确地处理 Response 对象返回的 Promise 链。以下是正确处理各种响应类型的方法：

1. 解析纯文本响应

假设服务器端使用 Express 框架，并返回一个简单的字符串：

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

function getEntry(key) {
  // 模拟数据获取
  return `Val is ${key}`;
}

app.get('/getEntry/:key', (req, res) => {
  res.send(getEntry(req.params.key)); // 返回纯文本
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

登录后复制

客户端应使用 response.text() 来解析此响应：

// client.js
const local_IP = 'localhost'; // 替换为你的实际IP
const hash = 'val1'; // 示例键

fetch(`http://${local_IP}:3000/getEntry/${hash}`)
  .then(response => {
    // 检查响应状态，确保请求成功
    if (!response.ok) {
      throw new Error('网络请求失败，状态码: ' + response.status);
    }
    // 关键：返回 response.text() 的 Promise
    return response.text();
  })
  .then(data => {
    // 在这里获取到解析后的纯文本字符串
    console.log('获取到的文本数据:', data); // 预期输出: "Val is val1"
  })
  .catch(error => {
    console.error('Fetch 请求出错:', error);
  });

登录后复制

2. 解析 JSON 响应

如果服务器返回 JSON 数据：

标签： javascript java js json app pdf 状态码