为什么变量isValid没有正确更新

Question

好的，所以我必须对jsonplaceholder用户运行注册表单，看看是否有重复并返回"注册完成"；或"；用户已经存在"；

if(isValid)
{
fetch('https://jsonplaceholder.typicode.com/users/')
.then(response => response.json())
.then(users => {
users.forEach(function(user){
if(user.username==usersname){
isValid=false;
}
});
});


if(isValid){
var x = document.getElementsByClassName("success");
x[0].innerHTML="";
var y = document.getElementsByClassName("errExist");
y[0].innerHTML="Registration Complete";
}else{
var x = document.getElementsByClassName("errExist");
x[0].innerHTML="";
var y = document.getElementsByClassName("success");
y[0].innerHTML="User Already Exists";
}
}

这是代码，但无论出于何种原因，isValid始终保持"有效"；真"尽管我知道它输入if(user.username＝＝usersname(；注册完成"；。有人能解释为什么会发生这种情况以及如何解决吗？

Answer 1

fetch是一个异步函数。当它运行时，其余的代码也会运行。因此，isValid实际上是在已经检查了条件之后更新的。

您应该将if条件移动到fetch中的最后一个.then中，或者使用Promise。

Answer 2

您需要在.then((中包含dom代码，否则，它将在您获得获取请求(异步操作(之前执行

if (isValid) {
fetch("https://jsonplaceholder.typicode.com/users/")
.then((response) => response.json())
.then((users) => {
users.forEach(function (user) {
if (user.username == usersname) {
isValid = false;
}
});
if (isValid) {
var x = document.getElementsByClassName("success");
x[0].innerHTML = "";
var y = document.getElementsByClassName("errExist");
y[0].innerHTML = "Registration Complete";
} else {
var x = document.getElementsByClassName("errExist");
x[0].innerHTML = "";
var y = document.getElementsByClassName("success");
y[0].innerHTML = "User Already Exists";
}
});
}