js如何引入本地json

在JavaScript中引入本地JSON文件，是一种常见的操作，特别是在进行前端开发时，这种方法可以让我们的代码更加模块化，便于维护和扩展，如何才能在JavaScript中引入本地JSON文件呢？下面我将为大家详细介绍这个过程。

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

{
  "name": "张三",
  "age": 25,
  "gender": "男",
  "hobbies": ["篮球", "足球", "编程"]
}

我们将探讨如何在JavaScript中引入这个JSON文件。

方法一：使用XMLHttpRequest

XMLHttpRequest是传统的一种方法，可以用来请求服务器上的资源，以下是一个使用XMLHttpRequest引入本地JSON文件的示例：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求类型、文件路径和异步处理方式
xhr.open('GET', 'data.json', true);
// 设置请求完成后的回调函数
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 解析JSON字符串为JavaScript对象
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('请求失败：', xhr.status);
  }
};
// 发送请求
xhr.send();

方法二：使用fetch API

fetch API是现代浏览器提供的一种更简洁、更强大的网络请求方法，以下是使用fetch API引入本地JSON文件的示例：

// 使用fetch API请求本地JSON文件
fetch('data.json')
  .then(response => {
    // 检查响应状态
    if (!response.ok) {
      throw new Error('网络响应错误');
    }
    return response.json(); // 解析JSON数据
  })
  .then(data => {
    console.log(data); // 处理数据
  })
  .catch(error => {
    console.error('请求失败：', error);
  });

方法三：使用async/await

如果你更喜欢使用ES7中的async/await语法，可以将fetch API与async/await结合使用，使代码更加简洁易读：

async function fetchData() {
  try {
    // 使用fetch API请求本地JSON文件
    const response = await fetch('data.json');
    // 检查响应状态
    if (!response.ok) {
      throw new Error('网络响应错误');
    }
    const data = await response.json(); // 解析JSON数据
    console.log(data); // 处理数据
  } catch (error) {
    console.error('请求失败：', error);
  }
}
// 调用函数
fetchData();

注意事项

1、文件路径：在引入本地JSON文件时，请确保文件路径正确，如果JSON文件与HTML文件位于同一目录下，可以直接使用文件名，如果位于子目录下，需要指定相对路径或绝对路径。

js如何引入本地json