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.
You're making 2 mistakes
thenThe 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