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

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

Object.create(null) is superfluous. result will always be overwritten with result = await ...
@Andreas to keep the code as close as possible to the OP's original, whilst also pointing out the actual issue they were having.
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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related