---
title: "如何在 JavaScript 中读取 JSON 文件（附示例）"
description: "本文介绍如何使用 fetch API、FileReader、ES modules 和 Node.js 在 JavaScript 中读取 JSON 文件，并提供简单示例和常见问题排查方法。"
url: "https://marsproxies.cn/blog/javascript-read-json-file/"
---

- [EN ](https://marsproxies.com/blog/javascript-read-json-file/ "英语")
  [CN](https://marsproxies.cn/blog/javascript-read-json-file/ "语言切换器")

[联系销售](https://marsproxies.cn/contact-sales/) [注册](https://dashboard.marsproxies.com/register/) [登录](https://dashboard.marsproxies.com/login/)

[联系销售](https://marsproxies.cn/contact-sales/) [注册](https://dashboard.marsproxies.com/register/) [登录](https://dashboard.marsproxies.com/login/)

[联系销售](https://marsproxies.cn/contact-sales/)

[登录](https://dashboard.marsproxies.com/login/) [注册](https://dashboard.marsproxies.com/register/)

- [EN ](https://marsproxies.com/blog/javascript-read-json-file/ "英语")
  [CN](https://marsproxies.cn/blog/javascript-read-json-file/ "语言切换器")

[返回博客](https://marsproxies.cn/blog/) 2026年10月21日

# 如何在 JavaScript 中读取 JSON 文件（附示例）

[操作指南](https://marsproxies.cn/blog/category/how-to/)

\-

目录

1. [理解 JavaScript 中的 JSON](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E7%90%86%E8%A7%A3-javascript-%E4%B8%AD%E7%9A%84-json)
2. [如何在 JavaScript 中读取 JSON 文件](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E5%A6%82%E4%BD%95%E5%9C%A8-javascript-%E4%B8%AD%E8%AF%BB%E5%8F%96-json-%E6%96%87%E4%BB%B6)
3. [A. 使用 Fetch API（浏览器端）](https://marsproxies.cn/blog/javascript-read-json-file/#b-a-%E4%BD%BF%E7%94%A8-fetch-api%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AB%AF)
4. [B. 使用 FileReader API（浏览器端，读取本地文件）](https://marsproxies.cn/blog/javascript-read-json-file/#b-b-%E4%BD%BF%E7%94%A8-filereader-api%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AB%AF%E8%AF%BB%E5%8F%96%E6%9C%AC%E5%9C%B0%E6%96%87%E4%BB%B6)
5. [C. 使用 ES6 Modules 的 import（现代 JavaScript）](https://marsproxies.cn/blog/javascript-read-json-file/#b-c-%E4%BD%BF%E7%94%A8-es6-modules-%E7%9A%84-import%E7%8E%B0%E4%BB%A3-javascript)
6. [D. 在 Node.js 中使用 require() 或 fs.readFile()](https://marsproxies.cn/blog/javascript-read-json-file/#b-d-%E5%9C%A8-nodejs-%E4%B8%AD%E4%BD%BF%E7%94%A8-require-%E6%88%96-fsreadfile)
7. [常见问题及排查方法](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E6%8E%92%E6%9F%A5%E6%96%B9%E6%B3%95)
8. [实际示例与使用场景](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E5%AE%9E%E9%99%85%E7%A4%BA%E4%BE%8B%E4%B8%8E%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF)
9. [结语](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E7%BB%93%E8%AF%AD)

\-

这种轻量级格式是网络上交换和存储结构化数据最常用的方式之一，在 API、配置文件、模拟数据集和应用设置中随处可见。

如果您需要在 JavaScript 中读取 JSON 文件内容，选择哪种方法主要取决于代码的运行环境。本指南将介绍 fetch API、FileReader、ES modules，以及 Node.js 中的 require() 和 fs 等工具。

## 理解 JavaScript 中的 JSON

JSON 全称为 JavaScript Object Notation，以键值对、数组、字符串、数字、布尔值和 null 值的形式存储信息。一个基本的 JSON 文件大致如下：

```json
{
  "name" : "Mars" ,
  "active" : true ,
  "ports" : [ 8000 , 8001 , 8002 ]
}
```

虽然这种格式看起来与普通的 JavaScript 对象相似，但两者并不完全相同。JSON 是一种基于文本的数据格式，语法规则严格：例如属性名必须使用双引号，且不支持注释或函数。

加载并解析 JSON 数据后，JavaScript 通常会将其转换为可在代码中直接使用的普通对象或数组。

## 如何在 JavaScript 中读取 JSON 文件

读取 JSON 文件的方法有多种，各自适用于不同的运行环境。

在浏览器中，fetch API 通常最适合读取网站提供的文件，而 FileReader 则适用于用户选择的本地文件。在基于模块的现代项目中，您可以直接导入数据；在 Node.js 中，require() 和 fs 模块是常见选择。

### A. 使用 Fetch API（浏览器端）

Fetch API 是从同一网站或公共链接获取 JSON 数据最简便的方法。它通过发起 HTTP 请求来执行此操作，并返回一个包含 Response 对象的 Promise。利用该 Response 对象，你可以通过调用 \`response.json()\` 来获取数据。

假设您的项目包含以下结构：

```javascript
project/
├── index.html
├── app.js
└── users.json
```

您的 JavaScript 文件可以这样加载 users.json：

```javascript
async function loadUsers ( ) {
  try {
    const response = await fetch ( './users.json' ) ;
 
    if ( !response.ok) {
      throw new Error ( ` HTTP error:  ${response.status} ` ) ;
    }
 
    const data = await response. json ( ) ;
    console. log (data) ;
  } catch (error) {
    console. error ( 'Could not load JSON:' , error) ;
  }
}
 
loadUsers ( ) ;
```

Fetch API 方法首先会请求 JSON 文件。通过 \`response.ok\` 进行检查，可以捕获诸如 404 或 500 之类的 HTTP 错误，因为 \`fetch()\` 并不会自动拒绝所有不成功的 HTTP 状态。随后，\`.json()\` 会读取响应主体，并将响应中的 JSON 内容解析为可用的 JSON 数据。

如果数据是从其他域名获取的，CORS 会阻止这一操作。服务器必须通过正确的 CORS 请求头授权该来源域名，仅修改客户端代码无法绕过 CORS 限制。

作为兜底处理，应捕获错误并展示缓存内容、空状态或友好提示，而不是让页面直接报错。

### B. 使用 FileReader API（浏览器端，读取本地文件）

fetch API 无法自由打开用户电脑上的任意文件。如果需要让用户选择本地 JSON 文件，请使用 \<input type="file"> 元素配合 FileReader API。

您的 HTML 文件可以包含：

```markup
<input type = "file" id = "jsonFile" accept = ".json" >
<pre id = "output" > </pre >
```

然后使用以下 JavaScript 代码：

```javascript
const input = document. getElementById ( 'jsonFile' ) ;
const output = document. getElementById ( 'output' ) ;
 
input. addEventListener ( 'change' , ( ) => {
  const file = input.files[ 0 ] ;
  if ( !file) return ;
 
  const reader = new FileReader ( ) ;
 
  reader. onload = ( ) => {
    try {
      const data = JSON . parse (reader.result) ;
      output.textContent = JSON . stringify (data, null , 2 ) ;
    } catch (error) {
      output.textContent = 'Invalid JSON file.' ;
    }
  } ;
 
  reader. readAsText (file) ;
} ) ;
```

FileReader 会将用户选择的本地 JSON 文件以文本形式读取，随后 JSON.parse() 会将该字符串转换为 JavaScript 对象。

FileReader 仅能访问用户主动选择的文件，这有助于防止浏览器无限制地访问本地文件。其 readAsText() 方法会将整个文件加载到内存中，因此不适合处理体积很大的文件。

务必将 JSON 解析逻辑放入 try/catch 中：一个缺失的逗号、多余的末尾逗号，或损坏的引号，都可能导致整个 JSON 文件失效。

### C. 使用 ES6 Modules 的 import（现代 JavaScript）

现代 JavaScript 模块也可以直接从 JSON 导入数据。在支持 JSON 模块的标准化环境中，当前语法使用了一个 import attribute：

```python
import settings from './settings.json' with { type : 'json' } ;
 
console.log(settings) ;
```

在 Node.js 中，导入 JSON 模块需要加上 type: 'json' 这一属性。如果您的 JavaScript 文件使用 .js 扩展名，并希望 Node 将其视为 ES module，可以在 package.json 中加入以下内容：

```json
{
  "type" : "module"
}
```

现代浏览器同样通过 import attribute 导入这些模块，此时 JSON 文件需以对应的 JSON MIME 类型提供。

Vite 或 Next.js 等工具可能允许通过其打包机制导入 JSON 文件，因此具体语法会因构建配置的不同而有所差异。

当 JSON 文件属于应用源代码的一部分、且无需在运行时发生变化时，这种方法非常方便。

### D. 在 Node.js 中使用 require() 或 fs.readFile()

Node.js 提供了多种读取 JSON 文件的方式。在 CommonJS 项目中，require() 是最简洁的写法：

```typescript
const fs = require ( 'node:fs' ) ;
 
const text = fs. readFileSync ( './config.json' , 'utf8' ) ;
const config = JSON . parse (text) ;
 
console . log (config) ;
```

fs.readFileSync() 会阻塞事件循环，直至文件读取和解析过程完成。这在应用启动阶段或许可以接受，但其他情况下应优先选用异步代码。

```typescript
const fs = require ( 'node:fs' ) ;
 
fs. readFile ( './users.json' , 'utf8' , (error, text) => {
  if (error) {
    console . error ( 'Read error:' , error) ;
    return ;
  }
 
  try {
    const users = JSON . parse (text) ;
    console . log (users) ;
  } catch (error) {
    console . error ( 'Invalid JSON:' , error) ;
  }
} ) ;
```

当应用需要在不阻塞其他任务的前提下读取 JSON 文件时，应使用异步文件访问方式。

## 常见问题及排查方法

第一个常见问题是输入格式错误：即便是很小的语法失误，也可能导致解析失败，因此应对不熟悉来源的 JSON 数据进行校验，并在 JSON 解析操作周围妥善处理异常。

另一个常见问题是在获取数据或读取磁盘文件时，混用同步和异步代码。fetch API、response.json()、FileReader 和 fs.readFile() 都不会立即返回最终数据。如果在 Promise 或回调完成之前就试图使用其结果，代码可能会得到 undefined 值。

另外，很容易混淆数据字符串与已解析的对象。以下是字符串形式：

```javascript
const raw = '{"country":"US"}' ;
```

以下是已解析的数据：

```javascript
const data = JSON . parse (raw) ;
console. log (data.country) ;
```

最后，处理体积较大或嵌套层级很深的文件时需格外小心。将整个 JSON 文件一次性加载到内存中可能开销很大。对于大型数据集，可以考虑使用流式读取、分页、拆分数据集，或改为存储在数据库中。

## 实际示例与使用场景

一个适合初学者练习的简单项目，是从 JSON 文件中加载商品卡片。例如在 products.json 文件中，内容可能如下：

```json
[
  { "name" : "Residential Proxies" , "type" : "Rotating" } ,
  { "name" : "ISP Proxies" , "type" : "Static" }
]
```

您可以使用 fetch API 获取该数据并构建界面：

```javascript
async function showProducts ( ) {
  const response = await fetch ( './products.json' ) ;
  const products = await response. json ( ) ;
 
  const container = document. getElementById ( 'products' ) ;
 
  products. forEach ( product => {
    const card = document. createElement ( 'div' ) ;
    card.textContent = ` ${product.name}  -  ${product.type} ` ;
    container. appendChild (card) ;
  } ) ;
}
 
showProducts ( ) ;
```

同样的方法也适用于下拉选项、价格卡片、语言列表、模拟 API 结果，以及其他由 JSON 驱动的界面。它能让内容与渲染代码相分离，使更新操作更加简便。

如果数据集非常小且保持不变，您也可以在脚本中直接使用内联 JSON；但如果多个页面或脚本需要共用同一份数据，使用外部 JSON 文件会更合适。

如果想要实际演示效果，可以将这些示例粘贴到 CodePen、StackBlitz 或一个小型 GitHub 仓库中，并通过本地开发服务器提供文件访问。请避免仅通过 file:// 方式打开页面，因为浏览器的安全规则可能会干扰从本地文件获取数据。

## 结语

并不存在一种在所有场景下都完美适用的 JSON 文件解析方法。对于通过 HTTP 提供的 JSON 文件，可以使用 fetch API；对于用户选择的 JSON 文件，则适合使用 FileReader。

对于基于模块的应用，如果 JSON 数据已随应用一起打包，直接导入数据会很方便。在 Node.js 中，require() 很适合基础的 CommonJS 配置解析，而 fs.readFile() 则更适合异步文件读取场景。

对初学者而言，最容易上手的方式是在浏览器中使用 fetch API、在 Node.js 中使用 fs.readFile()。一旦理解了解析发生的时机，以及代码是同步还是异步执行，处理这种格式就会变得清晰可控得多。

[了解更多](https://dashboard.marsproxies.com/register/)

\-

作者

[Lukas Tilkevicius 增长与合作经理](https://marsproxies.cn/blog/authors/lukas-tilkevicius/)

目录

1. [理解 JavaScript 中的 JSON](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E7%90%86%E8%A7%A3-javascript-%E4%B8%AD%E7%9A%84-json)
2. [如何在 JavaScript 中读取 JSON 文件](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E5%A6%82%E4%BD%95%E5%9C%A8-javascript-%E4%B8%AD%E8%AF%BB%E5%8F%96-json-%E6%96%87%E4%BB%B6)
3. [A. 使用 Fetch API（浏览器端）](https://marsproxies.cn/blog/javascript-read-json-file/#b-a-%E4%BD%BF%E7%94%A8-fetch-api%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AB%AF)
4. [B. 使用 FileReader API（浏览器端，读取本地文件）](https://marsproxies.cn/blog/javascript-read-json-file/#b-b-%E4%BD%BF%E7%94%A8-filereader-api%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AB%AF%E8%AF%BB%E5%8F%96%E6%9C%AC%E5%9C%B0%E6%96%87%E4%BB%B6)
5. [C. 使用 ES6 Modules 的 import（现代 JavaScript）](https://marsproxies.cn/blog/javascript-read-json-file/#b-c-%E4%BD%BF%E7%94%A8-es6-modules-%E7%9A%84-import%E7%8E%B0%E4%BB%A3-javascript)
6. [D. 在 Node.js 中使用 require() 或 fs.readFile()](https://marsproxies.cn/blog/javascript-read-json-file/#b-d-%E5%9C%A8-nodejs-%E4%B8%AD%E4%BD%BF%E7%94%A8-require-%E6%88%96-fsreadfile)
7. [常见问题及排查方法](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E6%8E%92%E6%9F%A5%E6%96%B9%E6%B3%95)
8. [实际示例与使用场景](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E5%AE%9E%E9%99%85%E7%A4%BA%E4%BE%8B%E4%B8%8E%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF)
9. [结语](https://marsproxies.cn/blog/javascript-read-json-file/#b-%E7%BB%93%E8%AF%AD)

分类

- [产品动态](https://marsproxies.cn/blog/category/product-news/)

  [5](https://marsproxies.cn/blog/category/product-news/)
- [产品对比](https://marsproxies.cn/blog/category/comparisons/)

  [5](https://marsproxies.cn/blog/category/comparisons/)
- [反检测解决方案](https://marsproxies.cn/blog/category/antidetect-solution/)

  [3](https://marsproxies.cn/blog/category/antidetect-solution/)
- [操作指南](https://marsproxies.cn/blog/category/how-to/)

  [119](https://marsproxies.cn/blog/category/how-to/)
- [球鞋抢购机器人](https://marsproxies.cn/blog/category/sneaker-bots/)

  [2](https://marsproxies.cn/blog/category/sneaker-bots/)
- [资讯](https://marsproxies.cn/blog/category/insights/)

  [89](https://marsproxies.cn/blog/category/insights/)

## 相关文章

[操作指南](https://marsproxies.cn/blog/category/how-to/)

### [2026年如何绕过 Netflix 家庭限制](https://marsproxies.cn/blog/bypass-netflix-household/)

了解如何合法且有效地绕过 Netflix 的家庭限制，在2026年继续实现跨地点共享账户

[Lukas Tilkevicius 增长与合作经理](https://marsproxies.cn/blog/authors/lukas-tilkevicius/)

2026年10月15日

[操作指南](https://marsproxies.cn/blog/category/how-to/)

### [如何绕过 YouTube TV 的地区限制](https://marsproxies.cn/blog/how-to-get-around-youtube-tv-location/)

别让 YouTube TV 的地理限制困扰您！参考我们的专业技巧，随时随地畅享您喜爱的节目和电影。

[Lukas Tilkevicius 增长与合作经理](https://marsproxies.cn/blog/authors/lukas-tilkevicius/)

2026年10月14日

[操作指南](https://marsproxies.cn/blog/category/how-to/)

### [如何使用代理绕过 Pornhub 封锁（2026年指南）](https://marsproxies.cn/blog/how-to-bypass-pornhub-ban/)

通过我们的2026年代理指南，安全绕过 Pornhub 年龄验证限制，了解哪些国家和地区会屏蔽 Pornhub，以及如何访问它。

[Lukas Tilkevicius 增长与合作经理](https://marsproxies.cn/blog/authors/lukas-tilkevicius/)

2026年10月12日