Как использовать async\await во Vue?

Question

[Александр Панков]

Здравствуйте, хочу использовать async\await во Vue.
есть order-list.vue, в методах коротого такое:

getOrder: function () {
	return new Promise(function (resolve, reject) {
	    setTimeout(() => {
	        console.log('hello world');
	        resolve(true)
	    }, 2000)
	});
},
example: async() => {
	console.log('start');
	for (let i in this.orders) {
	    await this.getOrder().then(
	        console.log('loaded ' + i)
	    )
	}
	console.log('finish');
}

собирается это все вебпаком.
При запуске вебпака получаю такое сообщение

ERROR in ./erp/vue/order-list.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./erp/vue/order-list.vue?vue&type=script&lang=js&)

Module not found: Error: Can't resolve '@babel/runtime/regenerator' in '/Users/pankovalxndr/Sites/mysite/erp/vue'
 @ ./erp/vue/order-list.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./erp/vue/order-list.vue?vue&type=script&lang=js&) 1:0-61 141:13-32 146:28-47 156:21-40

мой package.json

"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.4.3",
    "autoprefixer": "^8.6.5",
    "babel-loader": "^8.0.0-beta.6",
    "babel-runtime": "^6.26.0",
    "gulp": "git://github.com/gulpjs/gulp.git#6d71a658c61edb3090221579d8f97dbe086ba2ed",
    "gulp-cheerio": "^0.6.3",
    "gulp-cssnano": "^2.1.2",
    "gulp-postcss": "^7.0.1",
    "gulp-print": "^5.0.2",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^0.6.1",
    "gulp-sass": "^3.1.0",
    "gulp-svg-sprite": "^1.5.0",
    "gulp-svgmin": "^1.2.4",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1",
    "vue-loader": "^15.7.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }

Мой .babelrc

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

ну и мой скрипт запуска

'use strict';
const {VueLoaderPlugin} = require('vue-loader');
const path = require('path');
module.exports = {
    mode: 'development',
    watch: true,
    entry: [
        './erp/vue/app.js'
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'erp/vue'),
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }, {
                test: /\.js$/,
                use: 'babel-loader'
            }

        ]
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
}

Что я делаю не так?

Answer 1

[Сергей delphinpro]

А then то зачем?

example: async() => {
  console.log('start');
  for (let i in this.orders) {
      await this.getOrder();
      console.log('loaded ' + i);
  }
  console.log('finish');
}

UPD

Важно: в определении методов нельзя использовать стрелочную функцию, если вам нужен доступ к this. Освежите знания по стрелкам, контекстам.

Answer 2

[Кирилл Романов]

Вам нужно подключить regenerator-runtime либо использовать babel-plugin-transform-async-to-promises

UPD: будьте аккуратны при использовании этого плагина, так как у него есть весьма неприятный баг https://github.com/rpetrich/babel-plugin-transform...