js怎么获取json数据

欧易交易所欧易app 欧易下载搜狗输入法搜狗输入法 quickq下载 quickq官网

Hey小伙伴们，今天来聊聊一个超级实用的技能——用JavaScript获取JSON数据！🚀

想象一下，你正在开发一个网页应用，需要从服务器获取一些数据，比如用户信息、商品列表或者天气预报，这些数据通常以JSON（JavaScript Object Notation）格式传输，因为JSON轻量级、易于阅读和编写，而且与JavaScript天然兼容。🌐

如何用JavaScript获取这些JSON数据呢？别急，我来一步步带你飞！

使用Fetch API

Fetch API是现代浏览器提供的原生接口，用于发起网络请求，它返回一个Promise，这意味着你可以使用async/await来处理异步请求，代码更简洁，逻辑更清晰。

// 定义一个异步函数来获取数据
async function fetchData() {
  try {
    // 使用fetch发起GET请求
    const response = await fetch('https://api.example.com/data');
    
    // 检查响应状态
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    
    // 将响应体转换为JSON
    const data = await response.json();
    
    // 处理数据
    console.log(data);
  } catch (error) {
    console.error('There was a problem with your fetch operation:', error);
  }
}
// 调用函数
fetchData();

使用XMLHttpRequest

虽然Fetch API是现代的选择，但XMLHttpRequest在一些老的浏览器或特定场景下仍然有用。

function getJSON(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 0 || status === 200) {
      callback(null, xhr.response);
    } else {
      callback(new Error(xhr.statusText), null);
    }
  };
  xhr.onerror = function() {
    callback(new Error("Request failed"), null);
  };
  xhr.send();
}
// 使用
getJSON('https://api.example.com/data', function(err, data) {
  if (err) {
    console.log(err);
  } else {
    console.log(data);
  }
});