text/html charset=UTF-8 响应中的 JSON 解析：详细指南

2024-03-08 08:43:14

如何在 text/html charset=UTF-8 响应中解析 JSON

简介

在开发过程中，我们经常会遇到需要处理不同数据格式的情况。JSON（JavaScript Object Notation）是一种广泛使用的轻量级数据交换格式，但有时 API 返回的 JSON 数据却封装在 text/html charset=UTF-8 的响应中。这可能会让人困惑，因为在打印响应时显示的是 JSON，但将其视为字符串时又无法访问其中的数据。本文将深入探讨如何从 text/html charset=UTF-8 响应中解析 JSON，并提供详细的步骤和示例代码。

如何解析 JSON

要从 text/html charset=UTF-8 响应中解析 JSON，需要遵循以下步骤：

检查响应头：
确保响应头中包含 Content-Type: text/html; charset=UTF-8，表明响应包含 HTML 并使用 UTF-8 编码。
解析响应正文：
使用 JSON.parse() 方法解析响应正文。JSON.parse() 会将 JSON 字符串转换为 JavaScript 对象。
处理潜在错误：
JSON.parse() 方法可能会抛出 SyntaxError，如果响应正文包含无效的 JSON。为了处理这种情况，请使用 try-catch 块或将第二个参数传递给 JSON.parse() 方法以捕获错误。
验证响应：
解析 JSON 后，验证响应是否包含预期的数据结构。你可以使用 console.log() 或 debugger 语句来检查响应中的数据。

代码示例

以下是将 text/html charset=UTF-8 响应解析为 JSON 的代码示例：

const requestData = async (pageNumber) => {
  const url = `http://www.website.com/...`;

  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`Error: ${response.status}`);

    const contentType = response.headers.get('Content-Type');
    if (contentType !== 'text/html; charset=UTF-8') throw new Error('Invalid Content-Type');

    const body = await response.text();
    const json = JSON.parse(body);

    // 验证响应
    console.log(json);

  } catch (error) {
    console.error(`Error: ${error}`);
  }
};