如何在new Function中使用await函数

背景

我司做了一个可视化大屏的项目，但基于配置的组件不可能穷尽所有情况，因此计划开发js交互功能，让用户可以通过js进行二次开发。

遇到的问题

直接用new Function()去执行用户的代码，一开始写静态数据demo的时候没发现有啥问题。但当我去请求动态数据的时候，发现我很想用await，然而直接使用会报SyntaxError: await is only valid in async function at new Function ()的错。

曲折的解决问题

step1

google查询如何在new Function里使用async，查到了这篇文章，大喜。主要代码：

const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
const fetchPage = new AsyncFunction("url", "return await fetch(url);");
fetchPage("/").then(response => { ... });

因为原生不支持直接获取AsyncFunction，所以这里通过获取async函数的构造函数原型来获取。
屁颠屁颠地跑去项目里用了一下，发现并没有生效。

step2

开始脱离项目写demo，把问题最小化。代码如下：

function test() {
  const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
  const code =
    'const name = await Promise.resolve(stage.name); \n console.log(name)';
  const func = new AsyncFunction('stage', code);
  func({ name: '1' }).then((response) => {
    console.log(response);
  });
}
test();

在node.js和chrome环境下均可以正确执行

step3

思考项目中用到了什么，在想不会是webpack的锅吧，但不能确定。
于是回到项目，在浏览器报错后跳转到报错的地方，是一个VMxxxx文件，截屏如下：

image.png

看到我自己的code前面被包了一层(function anonymous(){mycode})，猜想会不会跟这个有关，但查了一下VMxxxx文件是js虚拟机编译生成的文件，照理说浏览器对同样的代码执行流程都一样，肯定都会经历编译阶段，既然在浏览器直接执行不报错，应该跟这个无关。

接着打断点看看发生了什么。在报错的语句前打了断点，然后在浏览器定义AsyncFunction并执行，并没有报错。

image.png

image.png

正当我纳闷的时候，想着应该对比一下项目里的AsyncFunction和我直接在浏览器定义的AsyncFunction有什么区别，就分别打印了一下，终于找到了原因，项目里的AsyncFunction不知道啥时候悄悄变成了Function，怪不得又不能用await了。

image.png

step4

所以思考AsyncFunction为什么会变成Function。似乎只有webpack可能产生影响，于是在另一个用webpack打包的项目中尝试了一下，也报一样的错，基本上锁定是webpack的问题了。想到我们一般在项目里会用babel把js编译成es5，而es5不认识async，自然也不认识它的原型，所以我把AsyncFunction的定义放到一个单独的文件，不让webpack编译，终于可以顺利执行了！

结论

1. 如果在原生支持es7的项目（不经过babel等转义）中使用，直接通过const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;获取到原型，就可以像new Function一样使用了
2. 目前前端工程化项目为了兼容性，一般都会用到babel转义，这时候就需要先把const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;这个定义放到单独的文件，并且不转义该文件，才能在执行的时候获取正确的类型。