javascript - 在 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 warn]: Error in created hook: "ReferenceError: regeneratorRuntime is not defined"

found in

---> at src/views/Test.vue at src/containers/TheContainer.vue at src/App.vue warn @ webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 webpack-internal:///./node_modules/vue/dist/vue.esm.js:1896 ReferenceError: regeneratorRuntime is not defined at 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) at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.esm.js:1862) at callHook (webpack-internal:///./node_modules/vue/dist/vue.esm.js:4216) at VueComponent.Vue._init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5001) at new VueComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5147) at createComponentInstanceForVnode (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3289) at init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3120) at merged (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3307) at createComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5973) at 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 的非特定错误页面:

Failed to proxy the request to http://localhost:8081/mypage, because the request to the proxy target failed. Check that the proxy target server is running and accepting requests to http://localhost:8081/. The underlying exception message was 'Es konnte keine Verbindung hergestellt werden, da der Zielcomputer die Verbindung verweigerte.'.Check the InnerException for more details.

这两个 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