javascript - VueJS 异步等待 - 未定义 regeneratorRuntime

Question

我正在尝试在我的应用程序中注册一个新用户，但无法有效地检查用户名是否存在 - 准确地说，“检查”被“单击”延迟了。

这是我的组件:

<template lang="html">
  <div class="main">
    <tw-navbar></tw-navbar>

    <div class="container-fluid">
     <div class="row">
       <tw-sidebar></tw-sidebar>

         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
            <div class="container">
              <h1 class="h2">Add new customer</h1>
              <form class="w-50 m-auto">
              <div class="form-group">
                <label for="username">Username</label>
                <input type="username" class="form-control" id="username" placeholder="Enter username"
                        v-model.lazy="customerData.username">
              </div>
              <button type="submit" class="btn btn-primary" @click.prevent="addUser">Add</button>
            </form>
            </div>
          </div>
         </main>
     </div>
    </div>
  </div>
</template>

组件内部的脚本

<script>
  import Navbar from './../navigation/Navbar.vue'
  import Sidebar from './../navigation/Sidebar.vue'
  import CustomerService from './../../services/CustomerService'
  import { EyeIcon, EyeOffIcon } from 'vue-feather-icons'

  export default {
      data() {
        return {
          customerData: {
                          username: '',
                        },
          usernameExists: null,
        }
      },
      methods: {
        addUser(){
            console.log("Before: "+this.usernameExists)

             CustomerService.checkUserExists(this.customerData.username)
                 .then(response => {
                  this.usernameExists = response.data['0'].exists
                  console.log("Inside: "+this.usernameExists)
                })
                .catch(e => console.log(e))

            console.log("After: "+this.usernameExists)
        },

      },
      components: {
        'tw-navbar': Navbar,
        'tw-sidebar': Sidebar,
        EyeIcon,
        EyeOffIcon
      }
    }
</script>

<style lang="css" scoped>
</style>

CustomerService 仅调用 API，它根据数据库查询返回 1(=exists) 或 O(=available)(=> SELECT count(*) as exists FROM users WHERE username = $1)

API (BE) 本身工作得很好

问题是 FE 没有等待 API 响应，因此“一键式”延迟..

当我点击“添加用户”按钮时 - 控制台会给我以下输出:

Before: null
After: null
Inside: 1

当我再次点击 ADD 按钮时..它给了我(延迟的)正确结果:

Before: 1
After: 1
Inside: 1

当然，如果我更改了用户名(更改为某个不存在的用户名):

Before: 1
After: 1
Inside: 0

在内部，它返回用户名可用，但在应用程序中似乎用户名已被占用(这是错误的

如您所见，Inside 工作正常，问题是它被称为最后一个..

我可能应该实现 ASYNC/AWAIT - 但那是我挣扎的地方..有人可以帮我吗？通过建议我需要做的代码更改？非常感谢

Answer 1

只需安装 core-js 和 regenerator-runtime 并将其导入到主入口文件的开头即可。

npm i -S core-js@latest regenerator-runtime@latest

在我的例子中，我添加到 main.js 文件，因为它是我在 Webpack entry 键上的主要入口文件。

// this is a recommendation of babeljs (https://babeljs.io/docs/en/babel-polyfill)
// because @babel/polifill is deprecated
import 'core-js/stable'; 
import 'regenerator-runtime/runtime';

// also is possible
// import 'core-js'; 
// import 'regenerator-runtime';
...
// other imports

我希望这会有用。问候。