Javascript async function throws error when using await

Question

I'm still beginner when it comes to JavaScript. In my vuejs3 app I have the following situation (I assume knowing this is Vue is not important):

In my Vue app I have a method like this

async LoadBasicData()
{
    this.basicData = await window.LoadBasicData();
},

It calls a function in a different JavaScript file. The method looks a bit like this:

async function LoadBasicData()
{
    return new Promise(resolve =>
    {
        let result = Object.create(null);

        let url = 'MyFancyUrl';

        axios
            .get(url)
            .then((response) =>
            {
                result.data = response.data;

                result = await LoadBuildId(result);

                resolve(result);
            })
    });
}

The LoadBuildId function is looking very similar

async function LoadBuildId(result)
{
    return new Promise(resolve =>
    {
        let url = 'MySecondFancyUrl';

        axios
            .get(url)
            .then((response) =>
            {
                result.buildId = response.data;

                resolve(result);
            })
    });
}

From my understanding of all this async/await/promise this should be the correct way of doing it, but considering that it's not working I'm pretty sure there is something I have misunderstood I'm getting the error "await is only valid in async functions and the top level bodies of modules" when calling LoadBuildId. I don't understand the error, as await is called in an async function

What am I doing wrong here? Why can't my async function call another async function? Or is there a better way?

I know there is at least one way to accomplish what I need, that is by using callbacks. I have been using it until now, but I'm not really a fan of it as it really makes the code unnecessary complicated.

What is the explicit promise construction antipattern and how do I avoid it? — VLAZ
– VLAZ, Commented Jan 14, 2022 at 12:41

Jamiec · Accepted Answer · 2022-01-14 12:46:57Z

1

You're making 2 mistakes

Wrapping the existing promise-related functionality with your own promise (see: What is the explicit promise construction antipattern and how do I avoid it?)
Mixing async/await with then

The code can be hugely simplified:

async function LoadBuildId(result)
{
    let url = 'MySecondFancyUrl';
    const response = await axios.get(url)
    result.buildId = response.data;
    return result;
}

and

async function LoadBasicData()
{
    let url = 'MyFancyUrl';
    let result = Object.create(null);

    const response = await axios.get(url);
    result = await LoadBuildId(result);
    return result;
}

To be honest, it can be simplified even further - theres no need to be constructing result objects just to set properties on it - you may as well just return the results from a call to axios.get

edited Jan 14, 2022 at 12:46

answered Jan 14, 2022 at 12:44

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Andreas Over a year ago

Object.create(null) is superfluous. result will always be overwritten with result = await ...

Jamiec Over a year ago

@Andreas hence my final paragraph

Andreas Over a year ago

Then why add it in the first place?

Jamiec Over a year ago

@Andreas to keep the code as close as possible to the OP's original, whilst also pointing out the actual issue they were having.

Adagio Over a year ago

Thank you so much, didn't see that it could be made like that. Sorry for the late response, I ended up sick with Covid-19 just after posting my question

Collectives™ on Stack Overflow

Javascript async function throws error when using await

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related