If语句未在vue 3异步函数中执行

Question

我正忙于一个客户管理系统项目，但是我在异步函数方面遇到了一点麻烦。我做api调用在一个单独的js文件APIControllerapi.js和在UserForm。我有一个async函数createUser，它应该调用两个作为props移植到组件中的函数。代码如下:

我已经导入了ref和APIController:

import { ref } from 'vue';
import APIController from '@Controllersapi';

我已经导入了道具:

props: ["toggleForm", "fetchUsers", "userId"],

最后是setup函数和async函数:

setup(props){
const user = ref({});
const createUser = async () => {
const success = await APIController.CreateUser(user.value.name, user.value.phone, user.value.address);
if(success){
props.fetchUsers();
props.toggleForm();
}
}
}

下面是APIController.CreateUser()函数来进一步说明:

CreateUser: (name, phone, address) => {
if(
name == "" ||
phone == "" ||
address == ""
) {
return false;
} else {
fetch(API_BASE + "/users/create", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name, phone, address })
}).then(response => response.json())
.then(data => {
if(data.success){
return data.response.user;
} else {
throw data.response.error;
}
}).catch(err => {
alert(err);
});
}
},

函数完美地执行了api调用，但是if语句根本没有执行。任何帮助都将不胜感激。谢谢你。

Answer 1

我设法弄明白了，但让我直截了当地说，没有你的输入，我不可能做到这一点。在我看来，if(success){ props.toggleForm(); props.fetchUsers();}条件需要在块执行之前读取为true。我的问题是让它读起来和console.log(success)命令返回的undefined一样真实。然后你们让我看api调用，我想，我期待它返回真一旦bool变量成功包含数据它从APIController调用。但如果事实并非如此呢?所以我只是把api调用中的if条件改成了简单的return true，这就成功了。

CreateUser: (name, phone, address) => {
if(
name == "" ||
phone == "" ||
address == ""
) {
return false;
} else {
fetch(API_BASE + "/users/create", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name, phone, address })
}).then(response => response.json())
.then(data => {
if(data.success){
alert("User created successfuly");
return true;
} else {
throw data.response.error;
}
}).catch(err => {
alert(err);
});
}
}

再次感谢大家的帮助和输入!这为我节省了几个小时可能的压力和头痛;-)。