js如何引用json文件

今天来聊聊如何在JavaScript中引用JSON文件，这个话题对前端开发者来说可是非常重要的哦！JSON文件在前端项目中有着广泛的应用，它可以用来存储数据、配置信息等，如何优雅地在js中引入JSON文件呢？就让我带大家一起探索一下吧！

我们需要准备一个JSON文件，创建一个名为data.json的文件,内容如下：

{
  "name": "张三",
  "age": 25,
  "hobbies": ["篮球", "足球", "游泳"]
}

我们将探讨几种在JavaScript中引用JSON文件的方法。

使用XMLHttpRequest

这种方式比较古老，但兼容性较好，通过XMLHttpRequest对象发送异步请求,获取JSON文件内容。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求类型、文件路径及异步处理方式
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 当请求成功时，解析JSON字符串为JavaScript对象
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
// 发送请求
xhr.send();

使用fetch API

fetch API是现代浏览器提供的一种更简洁、强大的异步请求方式。

// 使用fetch API获取JSON文件
fetch('data.json')
  .then(response => response.json()) // 将响应转换为JSON
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

使用async/await

结合async/await,可以让异步代码的书写更加直观。

// 定义一个异步函数
async function loadJson() {
  try {
    // 使用fetch API获取JSON文件，并等待结果
    const response = await fetch('data.json');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}
// 调用异步函数
loadJson();

在HTML中引入JSON文件

我们还可以在HTML文件中通过<script>标签引入JSON文件,但这需要将JSON文件转换为JavaScript对象。

创建一个名为data.js的文件,内容如下：

// data.js
var data = {
  "name": "张三",
  "age": 25,
  "hobbies": ["篮球", "足球", "游泳"]
};

然后在HTML文件中引入data.js：

<script src="data.js"></script>

在JavaScript中直接使用data变量即可。

js如何引用json文件

使用require或import

在Node.js或ES6模块环境中,我们可以使用require或import来引入JSON文件。

// 使用require引入JSON文件（Node.js环境）
const data = require('./data.json');
console.log(data);
// 使用import引入JSON文件（ES6模块环境）
import data from './data.json';
console.log(data);