0

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.

Adagio
  • 25
  • 9
  • 1
    [What is the explicit promise construction antipattern and how do I avoid it?](https://stackoverflow.com/q/23803743) – VLAZ Jan 14 '22 at 12:41

1 Answers1

1

You're making 2 mistakes

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

Jamiec
  • 133,658
  • 13
  • 134
  • 193