js如何加载json文件

JavaScript 如何加载 JSON 文件：从基础到实践的全面指南

在 Web 开发中，JSON（JavaScript Object Notation）因其轻量、易读、易于解析的特性，成为数据交换的主流格式，无论是配置文件、API 响应，还是本地数据存储，加载 JSON 文件都是前端开发的核心技能之一，本文将详细介绍 JavaScript 加载 JSON 文件的多种方法，包括浏览器环境下的原生实现、第三方库应用，以及 Node.js 环境下的处理方式，并附常见问题与最佳实践。

浏览器环境：加载本地或远程 JSON 文件

浏览器环境下,JavaScript 加载 JSON 文件主要分为两类：加载本地 JSON 文件（如项目中的 data.json）和加载远程 JSON 文件（如 API 接口返回的数据），两者的实现方式有所不同，需注意浏览器安全策略（如 CORS）的限制。

加载本地 JSON 文件：fetch + response.json()

现代浏览器推荐使用 fetch API 异步加载本地 JSON 文件。fetch 是基于 Promise 的网络请求接口，简洁且强大，已成为 Web API 的标准。

实现步骤：

假设项目目录下有一个 data.json 文件，内容如下：

{
  "name": "张三",
  "age": 25,
  "hobbies": ["reading", "coding"]
}

通过 fetch 加载并解析的代码如下：

fetch('data.json')
  .then(response => {
    // 检查响应状态是否成功（HTTP 状态码 200-299）
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 将响应体解析为 JSON 对象
    return response.json();
  })
  .then(data => {
    console.log('JSON 数据加载成功:', data);
    // 此处可进行后续数据处理，例如渲染到页面
    document.getElementById('app').textContent = `姓名: ${data.name}, 年龄: ${data.age}`;
  })
  .catch(error => {
    console.error('加载 JSON 文件失败:', error);
  });

关键点说明：

• response.ok：用于判断 HTTP 请求是否成功（状态码 2xx），避免因 404、500 等错误导致解析异常。
• response.json()：fetch 的响应体默认是 ReadableStream，需通过 json() 方法解析为 JavaScript 对象，该方法返回一个 Promise，需通过 .then() 处理。
• 错误处理：需同时捕获网络请求错误（如断网）和 HTTP 状态错误（如 404），避免程序异常。

加载远程 JSON 文件：fetch + CORS 跨域处理

远程 JSON 文件通常通过 API 接口获取（如 https://api.example.com/data），由于浏览器的同源策略（Same-Origin Policy），如果远程服务器未配置 CORS（跨域资源共享），直接请求会被拦截。

实现步骤：

以 GitHub 公开仓库的 JSON 文件为例（无需 CORS 配置）：

fetch('https://raw.githubusercontent.com/example/repo/main/data.json')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('远程 JSON 数据加载成功:', data);
  })
  .catch(error => {
    console.error('加载远程 JSON 文件失败:', error);
  });

CORS 注意事项：

• 服务器需响应 Access-Control-Allow-Origin 头，允许跨域请求，允许所有来源可设置：Access-Control-Allow-Origin: *；仅允许特定域名可设置：Access-Control-Allow-Origin: https://yourdomain.com。
• 如果请求涉及敏感操作（如 POST、PUT）或自定义头，浏览器会先发送一个 OPTIONS 预检请求（Preflight Request），服务器需正确响应 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。

兼容旧浏览器：XMLHttpRequest + JSON.parse

对于需要兼容 IE10 及以下旧浏览器的场景，可使用 XMLHttpRequest（XHR）对象，XHR 是早期的网络请求 API，通过回调函数处理异步响应。

实现步骤：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true); // true 表示异步请求
xhr.responseType = 'json'; // 自动解析 JSON（现代浏览器支持）
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('JSON 数据加载成功:', xhr.response);
  } else {
    console.error('加载 JSON 文件失败，状态码:', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('网络请求失败，请检查连接');
};
xhr.send();

关键点说明：

• xhr.responseType = 'json'：现代浏览器会自动解析响应体为 JSON 对象；旧浏览器需手动通过 JSON.parse(xhr.responseText) 解析。
• 回调地狱：XHR 通过事件监听（onload、onerror）处理异步，多层嵌套会导致代码可读性差，建议用 Promise 封装（如 axios 库）。

同步加载：不推荐的方式

虽然可通过 fetch 的同步模式（fetch('data.json', { method: 'GET' })，但需注意：同步请求会阻塞主线程，导致页面卡顿，仅适用于特殊场景（如浏览器扩展），浏览器环境中，强烈推荐异步加载。

Node.js 环境：加载本地 JSON 文件

Node.js 是服务器端 JavaScript 运行环境，加载 JSON 文件的方式与浏览器不同，主要通过文件系统（fs 模块）读取本地文件。

同步加载：fs.readFileSync

适合在脚本启动时加载配置文件（如 config.json），同步阻塞，确保后续代码依赖已加载的 JSON 数据。

实现步骤：

假设项目根目录有 config.json：

{
  "port": 3000,
  "database": "mongodb://localhost:27017/mydb"
}

同步加载代码：

const fs = require('fs');
const path = require('path');
try {
  const filePath = path.join(__dirname, 'config.json');
  const fileData = fs.readFileSync(filePath, 'utf8'); // 读取文件内容为字符串
  const jsonData = JSON.parse(fileData); // 解析为对象
  console.log('JSON 配置加载成功:', jsonData);
  console.log('服务端口:', jsonData.port);
} catch (error) {
  console.error('加载 JSON 配置失败:', error.message);
}

关键点：

• fs.readFileSync：同步读取文件，第二个参数 'utf8' 指定编码格式（避免二进制数据）。
• JSON.parse：必须手动解析，因为 fs.readFileSync 返回的是字符串，不会自动转换。
• 错误处理：需用 try-catch 捕获文件不存在（ENOENT）或 JSON 解析错误（SyntaxError）。

异步加载：fs.readFile + Promise

适合异步场景（如动态加载用户数据），避免阻塞事件循环，可通过回调或 Promise 实现，推荐 Promise + async/await 提升可读性。

实现步骤（Promise 封装）：

const fs = require('fs');
const path = require('path');
function loadJsonFile(filePath) {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf8', (error, data) => {
      if (error) {
        reject(error);
        return;
      }
      try {
        const jsonData = JSON.parse(data);
        resolve(jsonData);
      } catch (parseError) {
        reject(parseError);
      }
    });
  });
}
// 使用示例
const dataPath = path.join(__dirname, 'data.json');
loadJsonFile(dataPath)
  .then(data => {
    console.log('异步 JSON 数据加载成功:', data);
  })
  .catch(error => {
    console.error('加载失败:', error.message);
  });

使用 async/await 优化：

async function getData() {
  try {
    const data = await loadJsonFile(dataPath);
    console.log('数据:', data);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}
getData();

第三方库推荐：fs-extra

fs-extra 是 fs 模块的扩展，提供了更简洁的 API（如 readJson 方法），无需手动 JSON.parse：

const fs = require('fs-extra');
async function loadJson() {
  try {
    const data = await fs.readJson('data.json');
    console.log('数据:', data);
  } catch (error) {
    console.error('加载失败:', error);
  }
}
loadJson();

常见问题与最佳实践

跨域问题如何解决？