在 Vue.js 中使用 async/await 模式

Question

我想在我的新 Vue.js 项目中使用 async/await 模式。但是，在我第一次尝试之后，它抛出了一个错误：

<template>
    <div>
        <table>
            <tr>
                <th>Test</th>
            </tr>
            <tr v-for="(value, name) in pickingList">
                <td>{{value}}</td>
            </tr>
        </table>
        s
    </div>
</template>

<script>
    export default {
        name: 'Test',
        data() {
            return {
                pickingList: null,
                pickingZone: '1006'
            }
        },
        async created() {
            await this.getPickingList();
        },
        methods: {
            async getPickingList() {
                this.pickingZone = await this.$http.get("Picking/PickingZoneLists/" + this.pickingZone);
            }
        }
    }
</script>

这会引发以下错误：

webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue 警告]： 创建钩子时出错：“ReferenceError：regeneratorRuntime 不是 定义”

发现于

---> 在 src/views/Test.vue 在 src/containers/TheContainer.vue 在 src/App.vue 警告@webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 webpack-internal:///./node_modules/vue/dist/vue.esm.js:1896 ReferenceError：未定义 regeneratorRuntime 在 VueComponent.created (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist /cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Test.vue?vue&type=script&lang=js&:25) 在 invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.esm.js:1862) 在 callHook (webpack-internal:///./node_modules/vue/dist/vue.esm.js:4216) 在 VueComponent.Vue._init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5001) 在新的 VueComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5147) 在 createComponentInstanceForVnode (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3289) 在初始化（webpack-internal:///./node_modules/vue/dist/vue.esm.js:3120） 在合并（webpack-internal:///./node_modules/vue/dist/vue.esm.js:3307） 在 createComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5973) 在 createElm (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5920)

经过一番研究，我找到了一个建议安装以下两个 babel 插件的解决方案：

• @babel/polyfill
• @babel/plugin-transform-regenerator

我已经通过 npm 安装了它们并将它们添加到我的 babel.config.js 文件中：

module.exports = {
    presets: [
        ['@babel/preset-env']
    ],
    plugins: [
        ['@babel/polyfill'],
        ['@babel/plugin-transform-regenerator']
    ]
}

之后，我的页面立即崩溃，出现一个充满 SocketExceptions 和 HttpRequestExceptions 的非特定错误页面：

无法将请求代理到http://localhost:8081/mypage，因为 对代理目标的请求失败。检查代理目标 服务器正在运行并接受对http://localhost:8081/ 的请求。 潜在的异常消息是 'Es konnte keine Verbindung hergestellt werden, da der Zielcomputer die Verbindung verweigerte.'。查看 InnerException 了解更多详情。

这两个 babel 插件是否正确？如果是，我该如何解决这个问题？

我也找到了this related post，但我没有 webpack 配置文件。这是我的 vue.config.js：

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  configureWebpack: {
    //Necessary to run npm link https://webpack.js.org/configuration/resolve/#resolve-symlinks
    resolve: {
       symlinks: false
    }
  }
}

最后，这是我的 package.json：

{
  "name": "@coreui/coreui-free-vue-admin-template",
  "version": "3.0.0-beta.3",
  "description": "Open Source Bootstrap Admin Template",
  "author": {
    "name": "CoreUI",
    "url": "https://coreui.io",
    "github": "https://github.com/coreui",
    "twitter": "https://twitter.com/core_ui"
  },
  "contributors": [
    {
      "name": "CoreUI Team",
      "url": "https://github.com/orgs/coreui/people"
    }
  ],
  "homepage": "http://coreui.io",
  "copyright": "Copyright 2019 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "clearCache": "jest --clearCache",
    "release": "npm-run-all clearCache lint build test:unit test:e2e"
  },
  "dependencies": {
    "@coreui/coreui": "^3.0.0-beta.4",
    "@coreui/icons": "^1.0.0",
    "@coreui/utils": "^1.0.0",
    "@coreui/vue": "^3.0.0-beta.4",
    "@coreui/vue-chartjs": "^1.0.2",
    "axios": "^0.19.2",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.5",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-transform-regenerator": "^7.8.3",
    "@babel/polyfill": "^7.8.3",
    "@vue/cli-plugin-babel": "^4.1.1",
    "@vue/cli-plugin-e2e-nightwatch": "^4.1.1",
    "@vue/cli-plugin-eslint": "^4.1.1",
    "@vue/cli-plugin-unit-jest": "^4.1.1",
    "@vue/cli-service": "^4.1.1",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "chromedriver": "^79.0.0",
    "core-js": "^3.4.8",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.0.1",
    "node-sass": "^4.13.0",
    "npm-run-all": "^4.1.5",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 9"
  ],
  "engines": {
    "node": ">= 8.10.x",
    "npm": ">= 5.6.0"
  }
}

Answer 1

我发现了一篇关于这个主题的相对较新的 Medium 帖子。 @babel/polyfill 已弃用。你需要安装 @babel/runtime 和 @babel/plugin-transform-runtime，然后对你的 babel.config.js 做一些修改：

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        // "absoluteRuntime": false,
        "corejs": false,
        // "helpers": true,
        "regenerator": true,
        // "useESModules": false
      }
    ]
  ]
}

来源文章：https://medium.com/@kishan020696/react-16-with-webpack-4-and-babel-7-part-2-edb34d78f695