Javascript async 函数在使用 await 时抛出错误

Question

说到 JavaScript，我还是初学者。在我的 vuejs3 应用程序中，我遇到以下情况（我假设知道这是 Vue 并不重要）：

在我的 Vue 应用程序中，我有一个这样的方法

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

它调用另一个 JavaScript 文件中的函数。该方法看起来有点像这样：

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

LoadBuildId 函数看起来非常相似

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

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

                resolve(result);
            })
    });
}

根据我对这一切的理解 async/await/promise 这应该是正确的做法，但考虑到它不起作用，我很确定我误解了什么调用 LoadBuildId 时出现错误“await 仅在异步函数和模块的顶层主体中有效”。我不明白这个错误，因为在异步函数中调用了 await

我在这里做错了什么？为什么我的异步函数不能调用另一个异步函数？或者有更好的方法吗？

我知道至少有一种方法可以完成我需要的，那就是使用回调。直到现在我一直在使用它，但我并不是它的真正粉丝，因为它确实使代码变得不必要的复杂。

Answer 1

你犯了 2 个错误

用您自己的承诺包装现有的承诺相关功能（参见：What is the explicit promise construction antipattern and how do I avoid it?）
混合 async/await 与 then

代码可以大大简化：

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

和

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

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

老实说，它可以进一步简化 - 不需要构造 result 对象来设置它的属性 - 你也可以 return 调用的结果至 axios.get

Javascript async 函数在使用 await 时抛出错误

Javascript async function throws error when using await

javascript

promise

async-await

axios

vuejs3