使用创建反应应用程序的 AsyncFunction 错误答案

【问题标题】：AsyncFunction Error using create react app使用创建反应应用程序的 AsyncFunction 错误
【发布时间】：2020-04-21 23:46:52
【问题描述】：

我在使用 create-react-app 时遇到了一个奇怪的错误：

使用AsyncFunction 构造函数创建异步函数时，它在开发期间有效，但在构建后无效。

以下代码在开发中运行良好，但会抛出错误await is only valid in async function。

我尝试在生产版本中记录AsyncFunction，它变成function{ native code }而不是async function {native code } 我认为它与 babel 转译器有关，但我不知道如何解决这个问题。

任何帮助将不胜感激。谢谢！

    const AsyncFunction  = Object.getPrototypeOf(async function(){}).constructor;
    let func = new AsyncFunction('await otherAsync()')
    func();

【问题讨论】：

我遇到了同样的错误。我认为这是一个 babel 问题，但我不知道如何解决。

标签： javascript reactjs webpack async-await create-react-app

【解决方案1】：

我想我找到了解决方法。显然，Babel 正在根据旧的浏览器原语重写 AsyncFunction。我的解决方法是将函数包装在标记为“异步”的常规函数中。我生成的代码如下所示：

{
    const add = scope.add
    // ... everything else I want in scope
    const chart = scope.chart
    const histogram = scope.histogram
    const timeline = scope.timeline
    async function foos() { 
      return await dataset('elements')
    }
    return foos()
}

在上面的代码中，有一个名为“范围”的不可见变量，它用于定义局部变量。然后它返回一个硬编码的异步函数foos()，其中包含要评估的实际代码：return await dataset('elements')

我可以使用以下命令运行它。 gen_code 是包含上述生成代码的字符串。

try {
    let func = new Function('scope',gen_code)
    return func(scope)
} catch (e) {
    console.error(e)
    return e
}

我认为这样就可以了。

【讨论】：