javascript await function in script returns Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

Question

I have an async function on a.js file. for example:

async function LoadProducts() {
return new Promise(resolve => {
    PageMethods.set_path('/xxx/xxxx.aspx');
    PageMethods.GetToken(OnSuccess, OnError);

    function OnSuccess(Token) {
        var settings = {
            "url": "xxx",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "Token": Token,
                "Content-Type": "application/json; charset=UTF-8"
            },
            "data": JSON.stringify({
                "xxx": xxx
            }),
        };

        $.ajax(settings).done(function (response) {
            $("#divProducts").append(Ret);
            resolve('');
        });
    }

    function OnError(Error) {
        resolve('error');
    }
});

}

I want to call this function from html, in order to Load some products this way:

<div id="divProducts">
</div>
<script>
    await LoadProducts();
</script>

I get error: Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules.

I need to Load this part of the page before other scripts (of html template) run, that's why i use this way.

Any Ideas? Thanks!

Answer 1

finally, i had to write in html this way:

<script type="module">
    await LoadProducts();
</script>