如何获取js返回的json数据

Hey小伙伴们，今天来聊个技术向的话题，你们有没有遇到过这样的场景：当你在使用某个Web应用或者开发自己的网站时，需要从JavaScript中获取JSON数据？这可是个实用技能，尤其在处理API请求和响应时特别有用，就让我带你们一步步了解如何优雅地获取JS返回的JSON数据吧！

我们要明白什么是JSON，JSON，全称JavaScript Object Notation，是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，它基于JavaScript的一个子集，但JSON是独立于语言的文本格式，通常用于网页数据传输。

1. 使用Fetch API获取JSON数据

我们来看如何使用JavaScript中的Fetch API来获取JSON数据，Fetch API提供了一个强大且灵活的方式来异步请求资源，包括从服务器获取JSON数据。

fetch('https://api.example.com/data')
  .then(response => response.json()) // 将响应体转换为JSON
  .then(data => console.log(data)) // 处理JSON数据
  .catch(error => console.error('Error:', error)); // 处理错误

这段代码首先发起一个GET请求到指定的URL，然后使用.then()方法将响应体转换为JSON格式，如果转换成功，它将打印出JSON数据，如果过程中出现任何错误，.catch()方法会捕获这些错误并打印出来。

处理异步数据

由于Fetch API是异步的，这意味着你的代码会继续执行，而不会等待Fetch请求完成，这对于不阻塞用户界面是很好的，但也意味着你需要使用回调函数或者Promise来处理数据。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

在这个例子中，我们使用async和await关键字来简化异步代码的编写。await会暂停函数执行，直到Promise被解决（即数据被成功获取和转换）。

3. 使用XMLHttpRequest获取JSON数据

虽然Fetch API是现代JavaScript中的主流选择，但XMLHttpRequest也是一个强大的工具，尤其在需要更细粒度控制请求和响应时。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

这段代码创建了一个XMLHttpRequest对象，设置请求方法为GET，并指定了URL。onreadystatechange事件监听器会在请求状态改变时被调用，当请求完成（readyState为4）且响应状态码为200时，它会解析响应文本为JSON，并打印出来。