为何使用async函数封装jQuery $.get()调用时返回undefined，直接await $.get()却可正常获取JSON？

这个问题的核心在于你对async/await的工作逻辑，以及jQuery $.get方法的返回值特性理解有偏差，咱们一步步拆解清楚：

第一种写法的问题所在 #

先看你的第一个代码片段：

const getData = async() => { $.get("foo", (data) => { return data; }) }
(async () => { const d = await getData(); console.log(d); })();

这里有两个关键的逻辑漏洞：

1. getData函数没有返回值：虽然你把它标记为async函数，但函数体内只是调用了$.get，完全没有写return语句。async函数如果没有显式返回值，默认会返回一个Promise.resolve(undefined)，所以await getData()自然会得到undefined。
2. 回调里的return data根本传不出去：你在$.get的回调函数里写return data，这个返回值只会被jQuery内部的逻辑处理，根本不会传递到getData函数的外部，更不可能成为getData的返回值。

第二种写法能工作的原因 #

再看第二个代码片段：

(async () => { const getData = await $.get("foo", (data) => { return data; }); console.log(getData); })();

这里你直接await $.get(...)，而jQuery的$.get（包括所有AJAX方法）实际上返回的是一个Deferred对象——它兼容Promise的thenable接口，所以await可以正确等待这个异步请求完成，并直接拿到返回的JSON数据。顺便说一句，这里回调里的return data其实是多余的，因为$.get的返回值本身就会携带响应数据，不需要靠回调的return来传递。

如何修复第一种写法 #

如果你想保留getData函数的写法，只需要让它返回$.get的结果即可：

const getData = async() => { 
  // 直接返回$.get的Deferred对象，await会自动处理它
  return $.get("foo"); 
}
(async () => { const d = await getData(); console.log(d); })();

甚至可以更简洁——因为$.get本身就返回thenable对象，getData连async标记都不需要：

const getData = () => { 
  return $.get("foo"); 
}
(async () => { const d = await getData(); console.log(d); })();

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