使用 JavaScript 获取本地 JSON 文件并使用 ES 模块-js教程-PHP中文网

使用 JavaScript 获取本地 JSON 文件并使用 ES 模块

心靈之曲

发布： 2025-10-04 12:05:18

原创

982人浏览过

使用 JavaScript 获取本地 JSON 文件并使用 ES 模块

本文介绍了如何使用 JavaScript 中的 fetch 函数从本地加载 JSON 文件，并解决在加载过程中可能出现的 URL 解析错误。同时，还探讨了如何在多个 JavaScript 文件中使用 ES 模块的 export 和 import 语法，以及配置 package.json 文件以支持模块化的正确方法，从而实现代码的模块化和复用。

获取本地 JSON 文件

在 javascript 中，可以使用 fetch 函数来从本地文件系统读取 json 文件。fetch 函数发起一个网络请求，并返回一个 promise，该 promise resolve 为该请求的 response。为了读取本地文件，需要提供正确的 url。

URL 解析错误

常见的错误是 TypeError: Failed to parse URL from inputForHw3.json。这通常是由于 fetch 函数无法正确解析相对路径导致的。

解决方案

要解决此问题，请确保提供相对于当前 JavaScript 文件的正确路径。通常，在文件名之前添加 ./ 可以解决此问题，它明确地告诉 fetch 函数该文件位于同一目录中。

立即学习“Java免费学习笔记（深入）”；

fetch('./inputForHw3.json')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => console.error('Error fetching JSON:', error));

登录后复制

在这个例子中，./inputForHw3.json 指示 fetch 函数在当前 JavaScript 文件所在的目录中查找 inputForHw3.json 文件。

注意事项

确保 JSON 文件存在于指定的路径中。
检查文件权限，确保 JavaScript 代码有权读取该文件。

使用 ES 模块 (export/import)

ES 模块是 JavaScript 中组织和共享代码的一种方式。通过使用 export 和 import 语句，可以将代码分割成独立的模块，并在不同的文件中重用它们。

配置 package.json

要启用 ES 模块，需要在 package.json 文件中添加 "type": "module"。

{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module"
}

登录后复制

使用 export 和 import

Word-As-Image for Semantic Typography

文字变形艺术字、文字变形象形字

查看详情

导出模块: 使用 export 关键字将变量、函数或类从模块中导出。

// moduleA.js
export const myVariable = 123;

export function myFunction() {
  console.log('Hello from moduleA!');
}

登录后复制

导入模块: 使用 import 关键字将模块导入到其他文件中。

// main.js
import { myVariable, myFunction } from './moduleA.js';

console.log(myVariable); // 输出: 123
myFunction(); // 输出: Hello from moduleA!

登录后复制

多个 JavaScript 文件

启用 ES 模块后，每个 JavaScript 文件都被视为一个独立的模块。这意味着可以在多个 .js 文件中使用 export 和 import 语法。

运行多个模块

如果你有多个 .js 文件，并且希望它们分别运行，你可能需要一个构建工具（例如 webpack, Parcel, Rollup）来将它们打包成一个或多个可在浏览器或 Node.js 环境中运行的文件。或者，你可以创建一个入口文件，例如 index.html，并在其中使用 <script type="module"> 标签导入所有其他模块。

<!DOCTYPE html>
<html>
<head>
  <title>My Project</title>
</head>
<body>
  <script type="module" src="./main.js"></script>
  <script type="module" src="./anotherModule.js"></script>
</body>
</html>

登录后复制

注意事项