js如何读取json

JavaScript 如何读取 JSON 数据：从基础到实践的全面指南

在 Web 开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易读、易解析的特性，已成为前后端数据交互的核心格式，而 JavaScript 作为前端开发的核心语言，读取和操作 JSON 数据是开发者必须的基础技能，本文将从 JSON 的基本概念出发，详细介绍 JavaScript 中读取 JSON 数据的多种方法，包括同步与异步场景、错误处理以及实际应用示例,帮助你全面这一技能。

JSON 是什么？为什么需要读取 JSON？

JSON（JavaScript Object Notation）是一种基于 JavaScript 对象语法的数据格式，它采用键值对（Key-Value）的方式组织数据，结构清晰，易于人阅读和编写，也易于机器解析和生成，与 XML 相比，JSON 更简洁，解析效率更高，因此在 API 响应、配置文件、数据存储等场景中被广泛应用。

在 JavaScript 中，读取 JSON 数据的本质是将 JSON 格式的字符串（String）转换为 JavaScript 对象（Object）或数组（Array），以便后续进行数据操作（如读取、修改、渲染等）。

核心方法：JSON.parse() —— 将 JSON 字符串转为 JavaScript 对象

JavaScript 提供了内置的 JSON 对象，JSON.parse() 方法是将 JSON 字符串转换为 JavaScript 对象的核心方法,其语法如下：

JSON.parse(text[, reviver])

参数说明

• text：必需，要解析的 JSON 格式字符串，如果字符串不符合 JSON 格式，会抛出 SyntaxError。
• reviver：可选，一个转换函数，会在每个键值对解析时调用,可对值进行自定义处理。

基础示例

假设有一个 JSON 字符串 jsonStr,表示一个用户信息：

const jsonStr = '{"name": "张三", "age": 25, "isStudent": false, "hobbies": ["reading", "coding"]}';

使用 JSON.parse() 将其转换为 JavaScript 对象：

const userObj = JSON.parse(jsonStr);
console.log(userObj);
// 输出：{ name: '张三', age: 25, isStudent: false, hobbies: ['reading', 'coding'] }

解析后，就可以像操作普通 JavaScript 对象一样访问数据：

console.log(userObj.name); // 输出：张三
console.log(userObj.hobbies[0]); // 输出：reading

reviver 函数的使用

reviver 函数允许在解析过程中对数据进行转换，将日期字符串转换为 Date 对象：

const jsonStrWithDate = '{"name": "李四", "joinDate": "2023-01-01"}';
const userWithDate = JSON.parse(jsonStrWithDate, (key, value) => {
  if (key === 'joinDate') {
    return new Date(value); // 将日期字符串转为 Date 对象
  }
  return value;
});
console.log(userWithDate.joinDate); // 输出：Sat Jan 01 2023 00:00:00 GMT+0800 (中国标准时间)
console.log(typeof userWithDate.joinDate); // 输出：object

常见错误：JSON 格式不符合规范

JSON.parse() 对格式要求严格,以下常见错误会导致解析失败：

1. 使用单引号代替双引号
   JSON 规定键和字符串值必须使用双引号,单引号会报错：

   const invalidJsonStr = "{'name': '王五'}"; // 错误：单引号
   JSON.parse(invalidJsonStr); // 抛出 SyntaxError

2. 属性名不加引号
   JSON 要求属性名必须加双引号：

   const invalidJsonStr = "{name: '王五'}"; // 错误：属性名无引号
   JSON.parse(invalidJsonStr); // 抛出 SyntaxError

3. 末尾有逗号
   对象或数组末尾不能有多余的逗号：

   const invalidJsonStr = '{"name": "赵六", "age": 30,}'; // 错误：末尾逗号
   JSON.parse(invalidJsonStr); // 抛出 SyntaxError

解决方法：确保 JSON 字符串符合规范，或使用 try-catch 捕获错误：

const invalidJsonStr = "{'name': '王五'}";
try {
  const obj = JSON.parse(invalidJsonStr);
  console.log(obj);
} catch (error) {
  console.error("JSON 解析失败:", error.message); // 输出：JSON 解析失败: Unexpected token ' in JSON
}

异步场景：如何读取服务器返回的 JSON 数据？

在实际开发中，JSON 数据通常存储在服务器端，通过 HTTP 请求（如 fetch、axios）获取，此时需要处理异步操作,确保数据解析在请求完成后执行。

使用 fetch API 读取 JSON 文件或 API 响应

fetch 是浏览器内置的 HTTP 请求 API，返回一个 Promise，通过 response.json() 方法可以将响应体（Response Body）解析为 JSON 对象。

示例：读取本地 JSON 文件

假设项目根目录下有一个 user.json 文件：

{
  "name": "钱七",
  "age": 28,
  "skills": ["JavaScript", "React"]
}

使用 fetch 读取并解析：

fetch('user.json')
  .then(response => {
    // 检查响应状态是否成功（HTTP 状态码 200-299）
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    // 调用 response.json() 解析响应体为 JSON 对象
    return response.json();
  })
  .then(data => {
    console.log("解析后的数据:", data);
    // 输出：解析后的数据: { name: '钱七', age: 28, skills: ['JavaScript', 'React'] }
  })
  .catch(error => {
    console.error("请求或解析失败:", error);
  });

示例：调用 API 获取 JSON 数据

以 GitHub API 为例,获取用户信息：

fetch('https://api.github.com/users/octocat')
  .then(response => response.json())
  .then(data => {
    console.log("用户名:", data.name);
    console.log("公开仓库数:", data.public_repos);
  })
  .catch(error => {
    console.error("API 请求失败:", error);
  });

使用 async/await 处理异步 JSON 读取

async/await 是基于 Promise 的语法糖，让异步代码更易读，结合 try-catch 可以优雅地处理错误。

示例：用 async/await 读取 JSON 文件

async function fetchUserData() {
  try {
    const response = await fetch('user.json');
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    const data = await response.json(); // 等待解析完成
    console.log("用户数据:", data);
    return data;
  } catch (error) {
    console.error("获取用户数据失败:", error);
    throw error; // 可以向上抛出错误，由调用方处理
  }
}
// 调用函数
fetchUserData()
  .then(data => {
    console.log("成功获取数据:", data.name);
  })
  .catch(error => {
    console.error("最终捕获错误:", error);
  });

使用第三方库 axios 读取 JSON

axios 是流行的 HTTP 客户端库，支持浏览器和 Node.js，其 API 更简洁，且自动解析 JSON 响应。

安装 axios

npm install axios
# 或在 HTML 中引入 CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

示例：用 axios 获取 JSON 数据

axios.get('user.json')
  .then(response => {
    // axios 自动解析 JSON，response.data 就是解析后的对象
    console.log("用户数据:", response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了错误状态码（4xx、5xx）
      console.error("请求失败，状态码:", error.response.status);
    } else if (error.request) {
      // 请求已发送但无响应（如网络问题）
      console.error("无响应:", error.request);
    } else {
      // 请求配置错误
      console.error("错误:", error.message);
    }
  });

async/await + axios 示例

async function fetchUserWithAxios() {
  try {
    const