javascriptjqueryasync-awaitjquery-3

Async/Await with JQuery document READY

It works with document.addEventListener("DOMContentLoaded", async () => {}) but I am curious of making it work with JQuery.

And also, I want with Async/Await, not promises because later I will need the variable outside of promise callback.

let products = [];

$(document).ready(async function() {      // Does not work with ASYNC
    await getProducts();                  // IF i dont use async await, products = empty
    products.forEach(product => console.log(product))
})

const getProducts = () => {
   // Ajax call to server
   // products = ajaxResult;              // asign variable to result
   // returns Promise;
}
Solution

  • The problem was due to JQuery version 3.2.1 and maybe in some lower versions as well. $(document).ready(async function() {}) is fine to be used in later versions however.

    $(document).ready( handler ) is deprecated as @Phil mentioned below.

    $(handler) is recommended to use instead. JQuery docs