Question

使用 await 时，JavaScript 异步函数会引发错误

2022-01-14

886

javascript async-await promise axios vuejs3

在 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 个错误

用你自己的 promise 包装现有的与 promise 相关的功能（参见：什么是显式 promise 构造反模式，我该如何避免它？）
将 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 对象来设置其属性 - 你也可以只从调用中返回结果 axios.get