我正在尝试在我的应用程序中注册一个新用户,但无法有效地检查用户名是否存在 - 更准确地说,“检查”会被“点击”延迟..
这是我的组件:
<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>
客户服务仅调用API,该API根据数据库查询返回1(=存在)或O(=可用)(=> SELECT count(*) as exists FROM users WHERE username = $1)。
API(BE)本身运行得非常完美。
问题在于前端没有等待API响应,因此出现了“一次点击”延迟的情况。
当我点击添加用户按钮时,控制台会给我输出以下内容:
Before: null
After: null
Inside: 1
当我再次点击ADD按钮时...它会给我(延迟)正确的结果:
Before: 1
After: 1
Inside: 1
当然,如果我修改了用户名(为一些不存在的名称):
Before: 1
After: 1
Inside: 0
在内部,它返回用户名可用,但在应用程序中似乎该用户名已被使用(这是错误的)
所以你可以看到,内部运作良好,问题在于它被最后一个调用..
我应该实现ASYNC / AWAIT - 但这就是我的困境..有人能帮帮我吗?通过建议需要进行的代码更改?非常感谢