js如何获取json文件

JavaScript 如何获取 JSON 文件：5种常用方法详解

在 Web 开发中，JSON（JavaScript Object Notation）因其轻量级、易读的格式，成为前后端数据交互的主流选择，无论是本地配置文件、静态数据资源，还是后端 API 返回的数据， JavaScript 获取 JSON 文件的方法都是必备技能，本文将详细介绍 5 种常用方法，从基础的前端方案到 Node.js 环境下的处理，覆盖不同开发场景,并附完整代码示例。

前端环境：使用 fetch API（推荐现代方案）

fetch 是 ES2017 引入的现代 Web API，用于发起网络请求，支持 Promise 语法，简洁且强大，它是获取远程 JSON 文件的首选方法（也可用于本地文件，但需注意浏览器安全策略）。

核心代码示例

// 假设有一个本地 JSON 文件 data.json（需同源或 CORS 允许）
fetch('/data.json')
  .then(response => {
    // 检查响应状态是否成功（HTTP 状态码 200-299）
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码：${response.status}`);
    }
    // 将响应体解析为 JSON 对象
    return response.json();
  })
  .then(data => {
    console.log('获取的 JSON 数据：', data);
    // 在这里处理数据，例如渲染到页面
  })
  .catch(error => {
    console.error('获取 JSON 失败：', error);
  });

关键点说明

1. fetch 参数：可以是本地文件路径（如 /data.json）或远程 URL（如 https://api.example.com/data）。
2. response.json()：该方法是一个异步操作，用于读取响应体并解析为 JSON 对象。
3. 错误处理：需通过 response.ok（状态码 < 300）或 response.status 手动检查 HTTP 错误，fetch 不会因 404/500 等状态自动抛出错误。
4. 本地文件限制：直接通过 file:// 协议打开本地 HTML 文件时，fetch 本地 JSON 会因浏览器安全策略（ CORS）被阻止，需通过本地服务器（如 Live Server 插件）运行。

前端环境：使用 XMLHttpRequest（兼容旧浏览器）

XMLHttpRequest（XHR）是传统的 AJAX 技术，兼容 IE10+ 及所有现代浏览器,适合需要支持旧项目的场景。

核心代码示例

const xhr = new XMLHttpRequest();
// 初始化请求：GET 方法，异步请求
xhr.open('GET', '/data.json', true);
// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 4 表示请求已完成
    if (xhr.status === 200) { // 200 表示请求成功
      try {
        const data = JSON.parse(xhr.responseText);
        console.log('获取的 JSON 数据：', data);
      } catch (error) {
        console.error('JSON 解析失败：', error);
      }
    } else {
      console.error(`HTTP 错误！状态码：${xhr.status}`);
    }
  }
};
// 发送请求
xhr.send();

关键点说明

1. readyState：表示请求状态，4 表示响应已完全接收。
2. status：HTTP 状态码，200 表示成功。
3. JSON.parse：需手动将字符串响应体解析为 JSON 对象，fetch 会自动处理。
4. 兼容性：比 fetch 更早支持，但代码更冗余,推荐仅在需要兼容旧浏览器时使用。

前端环境：动态创建 <script> 标签（跨域无限制方案）

JSON 文件位于不同源（跨域），且后端未配置 CORS，可通过 JSONP（JSON with Padding）思想，动态创建 <script> 标签请求文件，利用 <script> 的跨域特性。

核心代码示例

假设 JSON 文件地址为 https://other-domain.com/data.json，且支持 JSONP（需后端配合返回 callbackName({...}) 格式）。

// 定义回调函数（需与后端约定的名称一致）
function handleJsonData(data) {
  console.log('获取的 JSON 数据：', data);
}
// 动态创建 script 标签
const script = document.createElement('script');
script.src = 'https://other-domain.com/data.json?callback=handleJsonData';
document.body.appendChild(script);
// 请求完成后移除 script 标签（可选）
script.onload = function() {
  document.body.removeChild(script);
};

关键点说明

1. JSONP 原理：通过 <script> 标签的 src 属性请求 URL，后端返回 callbackName({...}) 格式的 JavaScript 代码，浏览器执行时会调用全局的 callbackName 函数并传入数据。
2. 局限性：仅支持 GET 请求，安全性较低（需确保后端可信），且现代 API 通常优先使用 CORS。
3. 无 JSONP 支持：如果后端未提供 JSONP 接口,此方法无效。

Node.js 环境：使用 fs 模块（读取本地文件）

在 Node.js 服务端环境中，可通过内置的 fs（File System）模块同步或异步读取本地 JSON 文件。

异步读取（推荐：fs.readFile）

const fs = require('fs');
fs.readFile('./data.json', 'utf8', (err, data) => {
  if (err) {
    console.error('读取文件失败：', err);
    return;
  }
  try {
    const jsonData = JSON.parse(data);
    console.log('获取的 JSON 数据：', jsonData);
  } catch (error) {
    console.error('JSON 解析失败：', error);
  }
});

同步读取（fs.readFileSync）

const fs = require('fs');
try {
  const data = fs.readFileSync('./data.json', 'utf8');
  const jsonData = JSON.parse(data);
  console.log('获取的 JSON 数据：', jsonData);
} catch (error) {
  console.error('读取或解析 JSON 失败：', error);
}

关键点说明

1. fs.readFile：异步方法，回调参数为 (err, data)，data 是文件内容的字符串。
2. fs.readFileSync：同步方法，直接返回文件内容，出错时抛出异常，需用 try-catch 捕获。
3. utf8 编码：指定文件编码为 UTF-8，避免解析为二进制数据。
4. 路径问题：建议使用绝对路径（如 path.join(__dirname, 'data.json')）,避免相对路径的文件查找问题。

Node.js 环境：使用 axios 或 node-fetch（请求远程 JSON）

Node.js 服务端需要获取远程 JSON 文件（如 API 接口），可通过第三方库 axios 或 node-fetch（fetch 的 Node.js 实现）。

使用 axios（推荐：简洁且功能强大）

const axios = require('axios');
axios.get('https://api.example.com/data')
  .then(response => {
    console.log('获取的 JSON 数据：', response.data);
  })
  .catch(error => {
    console.error('请求失败：', error.message);
  });

使用 node-fetch

const fetch = require('node-fetch');
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码：${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('获取的 JSON 数据：', data);
  })
  .catch(error => {
    console.error('获取 JSON 失败：', error);
  });

关键点说明

1. 安装依赖：需先安装库（npm install axios 或 npm install node-fetch）。
2. axios 特点：自动解析 JSON（response.data 直接是对象），支持请求/响应拦截，错误处理更友好。
3. node-fetch 特点：与浏览器 fetch API 语法一致，适合习惯前端 fetch 开发的场景。

如何选择合适的方法？