如何在jQuery的$(document).ready中使用Async/Await语法

算力阿峰

2026-9-26

问题原因

低版本jQuery（<3.0）的$(document).ready()回调如果返回非false/undefined的值时会出现逻辑异常，而async函数默认返回Promise对象，会触发这个兼容性问题。高版本jQuery（≥3.0）本身支持async回调，出现异常大概率是你的getProducts没有正确返回Promise对象。

通用兼容写法（所有jQuery版本都适用）

不要直接把async加在ready的回调函数上，在回调内部包裹一个自执行的async函数即可，完全兼容所有jQuery版本，同时满足async/await的使用需求：

let products = [];

$(document).ready(function() {
    // 内部自执行async函数，不会影响ready回调的返回值
    (async () => {
        await getProducts();
        products.forEach(product => console.log(product))
        // 后续需要使用products的逻辑都可以放在这个作用域内
    })()
})

// 正确实现getProducts，确保返回可await的Promise
const getProducts = async () => {
   // 示例：jQuery的$.ajax本身返回符合Promise规范的对象，可直接await
   const ajaxResult = await $.ajax({
       url: "你的后端接口地址",
       method: "GET"
   })
   products = ajaxResult;
}

如果你使用jQuery 3.0及以上版本

你的原有写法本身是合法的，只需要修正getProducts的Promise返回逻辑即可正常运行：

let products = [];

// 3.0+版本支持直接给ready回调加async
$(document).ready(async function() {
    await getProducts();
    products.forEach(product => console.log(product))
})

const getProducts = () => {
   // 直接返回$.ajax的执行结果即可，它本身是Promise兼容的
   return $.ajax({
       url: "你的后端接口地址",
       method: "GET"
   }).done(res => {
       products = res
   })
}