js 读取json文件|极客笔记

js 读取json文件

在前端开发中，我们经常会遇到需要读取外部的数据文件，比如 JSON 文件。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写，也易于机器解析和生成。因此，读取 JSON 文件是前端开发中一个常见的操作。

本文将介绍如何使用 JavaScript 来读取 JSON 文件，并展示一些示例代码和运行结果。

读取本地 JSON 文件

首先，我们在项目中准备一个名为 data.json 的 JSON 文件，内容如下：

{
  "name": "Alice",
  "age": 25,
  "city": "New York"
}

接下来，我们使用 JavaScript 来读取这个 JSON 文件。我们可以使用 XMLHttpRequest 对象来发送 HTTP 请求，并获取 JSON 文件的内容。

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 打开一个 GET 请求，请求地址为 data.json
xhr.open('GET', 'data.json', true);

// 设置响应类型为 json
xhr.responseType = 'json';

// 当请求完成时
xhr.onload = function() {
  if(xhr.status === 200) {
    // 请求成功，打印响应内容
    console.log(xhr.response);
  } else {
    // 请求失败，打印错误信息
    console.error('Failed to load data.json');
  }
};

// 发送请求
xhr.send();

运行以上代码，控制台将打印出 data.json 文件的内容：

{
  name: "Alice",
  age: 25,
  city: "New York"
}

使用 Fetch API 读取 JSON 文件

除了使用 XMLHttpRequest，我们还可以使用现代浏览器提供的 Fetch API 来读取 JSON 文件。Fetch API 是一种更现代化和强大的请求资源的方式，提供了更丰富的功能和更简洁的语法。

我们可以按如下方式使用 Fetch API 读取 data.json 文件：

// 发起 Fetch 请求，获取 data.json 文件
fetch('data.json')
  .then(response => {
    if (!response.ok) {
      throw new Error('Failed to load data.json');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

运行以上代码，同样会输出 data.json 文件的内容：

{
  name: "Alice",
  age: 25,
  city: "New York"
}

异步函数方式读取 JSON 文件

在现代 JavaScript 中，我们也可以使用 async/await 语法来更简洁地处理异步操作。下面是使用 async/await 异步函数读取 JSON 文件的代码示例：

// 定义异步函数读取 JSON 文件
async function fetchData() {
  try {
    const response = await fetch('data.json');
    if (!response.ok) {
      throw new Error('Failed to load data.json');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

// 调用异步函数
fetchData();

同样，以上代码会输出 data.json 文件的内容。