jQuery中如何将getJSON获取的数据从函数中返回？

嘿，这个问题其实很多刚接触异步操作的开发者都会踩坑！你猜得没错，问题根源就是$.getJSON是异步执行的，咱们一点点拆解：

你写的loadJson函数里，调用$.getJSON之后，函数会立刻执行完并返回（此时内部的回调函数还没触发，因为网络请求还在后台跑呢），所以loadJson本身没有返回任何值，console.log自然打出undefined。而你在回调里写的return data，只是把数据返回给了getJSON的内部逻辑，根本传不到外层的loadJson函数里。

给你几个实用的解决方案，按需选就行：

方案1：用回调函数（最经典的异步处理方式） #

修改loadJson，让它接受一个回调函数当参数，等请求完成后把数据传给这个回调：

function loadJson(callback){
  $.getJSON('data.json', function (data) {
    callback(data); // 请求搞定后，把数据丢给回调函数
  });
}

// 调用的时候这么写
loadJson(function(data){
  console.log(data); // 这里就能拿到你要的数据啦
});

方案2：利用Promise（jQuery 3.0+适用） #

其实$.getJSON本身就会返回一个Promise对象，咱们直接把它return出去，然后用.then()处理结果：

function loadJson(){
  return $.getJSON('data.json'); // 返回Promise
}

// 使用的时候
loadJson().then(function(data){
  console.log(data);
}).catch(function(error){
  console.error('请求出问题啦:', error); // 别忘了处理错误
});

方案3：用async/await（更简洁的写法，需要支持ES8） #

把loadJson改成async函数，用await等待异步请求完成，写法和同步代码差不多：

async function loadJson(){
  try {
    const data = await $.getJSON('data.json');
    return data;
  } catch (error) {
    console.error('请求失败:', error);
    throw error; // 可以把错误抛出去让调用者处理
  }
}

// 调用方式1：在async函数里用await
async function main(){
  const data = await loadJson();
  console.log(data);
}
main();

// 调用方式2：直接用.then()兜底
loadJson().then(data => console.log(data));

核心记住一点：异步操作没法像同步代码那样直接return结果，必须等异步操作完成后，通过回调、Promise或者async/await这类方式来获取数据~

备注：内容来源于stack exchange，提问作者MrUnknown