背景
基于 webpack 搭建的 vue 项目中,某个文件使用 async/await
报错,例如:
<script>
export default {
name: "test",
methods: {
async queryUsers() {
// 配置请求参数
const options = { url: this.$constant.BACK_API.QUERY_USRS }
const users = await this.$request(options)
console.log(users)
}
},
mounted() {
this.queryUsers()
}
}
</script>
原因
在 vue 项目中使用async/await
处理并行多个异步,因为项目中没有使用 transform-runtime 将 es6+ 转换成 es5。
解决方案
安装 @babel/plugin-transform-runtime:
npm i @babel/plugin-transform-runtime -D
配置 .babelrc 文件:
{
"plugins": [
[
"@babel/plugin-transform-runtime"
]
]
}
若项目中不存在 .babelrc 文件,直接在项目根目录下添加即可。