ES6 中引入了 async/await
关键字,让异步编程变得更加清晰简单。但是在实际编程中,我们需要通过 Babel 将 ES6 代码转换为 ES5 代码以实现兼容性。在使用 Babel 编译 async/await 代码时,会遇到一些问题,本文将会讲解这些问题及解决方法。
问题一:缺少对 regeneratorRuntime 的引用
在使用 Babel 编译 async/await 代码时,我们可能会遇到以下的错误信息:
Uncaught ReferenceError: regeneratorRuntime is not defined
这个错误的产生是因为 Babel 仅仅是将 async/await
代码转换为 generator 函数的代码,而这个 generator 函数是需要 regeneratorRuntime
模块的支持的。
解决方法是在代码中添加对 regeneratorRuntime
模块的引用。具体做法是在代码中添加以下代码:
import 'regenerator-runtime/runtime'
这个代码会自动引入 regeneratorRuntime
模块并将其注入当前的环境中,从而使得编译后的代码可以正常运行。
问题二:编译后的代码体积过大
由于 async/await
代码转换为 generator 函数的代码需要引入 regeneratorRuntime
模块,所以编译后的代码体积比较大,这在移动端应用或者网络传输时会带来一定的问题。
解决方法是使用 babel-plugin-transform-runtime 插件来实现对 regeneratorRuntime
模块的引用。具体做法是:
- 安装插件:
npm install --save-dev @babel/plugin-transform-runtime
- 在 Babel 配置文件中添加插件:
-- -------------------- ---- ------- - ---------- - - ---------------------------------- - --------- ------ ---------- ----- -------------- ----- --------------- ----- - - - -展开代码
- 在代码中使用
async/await
:
async function getUserInfo() { const response = await fetch('/api/user') const data = await response.json() return data }
经过这样的配置,Babel 将会使用 @babel/runtime
模块来引入 regeneratorRuntime
模块,并且不会在编译后的代码中添加任何冗余代码。
总结
本文介绍了在使用 Babel 编译 async/await 代码时遇到的问题及解决方法。第一个问题是缺少对 regeneratorRuntime
模块的引用,需要手动添加;第二个问题是编译后的代码体积过大,可以使用 babel-plugin-transform-runtime
插件来解决。希望本文能够对大家学习和使用 async/await 代码有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6490519548841e9894e7c4d0