js怎么调取json文件

在JavaScript中,调取JSON文件是一种常见的操作，通常用于获取数据并在网页上展示，如何使用JavaScript来调取JSON文件呢？下面将详细介绍这一过程。

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

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

我们将通过以下几种方法来讲解如何在JavaScript中调取这个JSON文件。

使用XMLHttpRequest

XMLHttpRequest是传统的发送请求方式,尽管现在不常用，但仍然有必要了解。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求类型、URL以及是否异步处理
xhr.open('GET', 'data.json', true);
// 设置响应类型
xhr.responseType = 'json';
// 设置请求完成的回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，处理返回的JSON数据
    var data = xhr.response;
    console.log(data);
  } else {
    // 请求失败，处理错误
    console.error('请求失败：', xhr.statusText);
  }
};
// 发送请求
xhr.send();

使用fetch API

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

// 使用fetch API发起GET请求
fetch('data.json')
  .then(response => {
    // 检查响应状态
    if (response.ok) {
      // 将响应体转换为JSON
      return response.json();
    } else {
      throw new Error('请求失败：' + response.statusText);
    }
  })
  .then(data => {
    // 处理返回的JSON数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('请求出错：', error);
  });

使用async/await

结合async/await，可以使fetch API的代码更加简洁。

// 定义一个异步函数
async function fetchData() {
  try {
    // 发起请求并等待响应
    const response = await fetch('data.json');
    // 检查响应状态
    if (!response.ok) {
      throw new Error('请求失败：' + response.statusText);
    }
    // 将响应体转换为JSON
    const data = await response.json();
    // 处理返回的JSON数据
    console.log(data);
  } catch (error) {
    // 处理错误
    console.error('请求出错：', error);
  }
}
// 调用异步函数
fetchData();