$.getJSON获取JSON数据后无法访问属性问题求助

你遇到的是JavaScript异步操作的经典坑——$.getJSON是异步执行的，这意味着代码不会等着请求完成再往下走。具体来说，你的代码执行顺序是这样的：

1. 创建空对象var country = {}
2. 发起$.getJSON请求（此时请求还在网络传输中，没拿到数据）
3. 立刻执行console.log(country)——这时候country.config还没被赋值，所以输出的是{}
4. 过了一会儿，请求完成，回调函数执行，给country.config赋值

至于为什么控制台展开对象能看到config属性？那是浏览器控制台的“小特性”：它会保留对象的引用，当你手动展开时，会读取对象的当前状态，而不是console.log执行时的状态。这就造成了“控制台显示有属性，但代码访问不到”的错觉。

1. 把属性访问逻辑放在回调函数内部（最直接的方式） #

既然回调函数是在请求完成后才执行的，那所有需要用到country.config的代码都应该放在这里面：

var country = {} ; 
$.getJSON('https://freegeoip.net/json/', function (code) { 
  country.config = code ; 
  // 在这里访问属性，绝对不会出错
  console.log(country.config.country_code); // 正常输出LB
  console.log(country.config.country_name); // 正常输出Lebanon
});

2. 使用Promise风格的写法（更现代、更灵活） #

jQuery的AJAX方法本身支持Promise，可以用.done()、.fail()来处理结果：

var country = {} ; 
$.getJSON('https://freegeoip.net/json/')
  .done(function(code) {
    country.config = code;
    console.log(country.config.country_code);
  })
  .fail(function(error) {
    console.error('请求失败了:', error);
  });

3. 用async/await（最简洁的现代写法） #

如果你的环境支持ES2017+，可以把代码放在async函数里，用await等待请求完成：

async function fetchCountryData() {
  var country = {};
  try {
    // 用await等待请求返回结果
    const code = await $.getJSON('https://freegeoip.net/json/');
    country.config = code;
    console.log(country.config.country_code);
  } catch (err) {
    console.error('请求出错:', err);
  }
}

// 调用这个异步函数
fetchCountryData();

内容的提问来源于stack exchange，提问作者user3763103