Todavía soy un principiante cuando se trata de JavaScript. En mi aplicación vuejs3 tengo la siguiente situación (supongo que saber que esto es Vue no es importante):

En mi aplicación Vue tengo un método como este

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

Llama a una función en un archivo JavaScript diferente. El método se parece un poco a esto:

 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); }) }); }

La función LoadBuildId se ve muy similar

 async function LoadBuildId(result) { return new Promise(resolve => { let url = 'MySecondFancyUrl'; axios .get(url) .then((response) => { result.buildId = response.data; resolve(result); }) }); }

Desde mi comprensión de todo esto async/await/promise, esta debería ser la forma correcta de hacerlo, pero teniendo en cuenta que no funciona, estoy bastante seguro de que hay algo que no entendí bien. Recibo el error "await solo es válido en funciones asíncronas y los cuerpos de nivel superior de los módulos" al llamar a LoadBuildId. No entiendo el error, ya que se llama await en una función asíncrona

¿Qué estoy haciendo mal aquí? ¿Por qué mi función asíncrona no puede llamar a otra función asíncrona? ¿O hay un mejor camino?

Sé que hay al menos una forma de lograr lo que necesito, es mediante el uso de devoluciones de llamada. Lo he estado usando hasta ahora, pero no soy realmente un fanático de él, ya que realmente hace que el código sea innecesariamente complicado.