如何等待异步请求完成

How to wait until the async request is complete

本文关键字：异步 请求 等待 何等待      更新时间：2023-09-26

我有一个ajax注册表。用户可以在输入字段中键入所需的用户名，然后立即点击注册按钮，而检查用户名是否可用的ajax请求尚未完成。在这种情况下，我希望只有在检查用户名的ajax请求完成时才开始执行register按钮的操作，否则等待它完成，然后继续。如何做到这一点？

我希望用户名验证函数保持异步，因为每当用户在输入字段上键入时，它都会执行。

一种方法是在单击register按钮时进入setTimeout（）循环，并一直呆在其中直到标志好为止。另一种方法是，如果异步请求未完成，则调用同步用户名检查请求。有更好的方法吗？

如果您在不使用jQuery的情况下给出答案，那就太好了。

不要为此使用setTimeout。

只需使用jquery的ajax的回调功能：在success回调或新的done助手中执行"after"代码：

$.ajax({
  url: "test.html"
}).done(function() { 
  // do things after the answer has been received
});

编辑：

没有jquery，也没有立即触发：

var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
                requestDoneAndOK = true;
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();

当点击"注册"按钮时，您只需要检查requestDoneAndOK，如果它是真的，则调用您的其他函数。

编辑2:

只要满足两个条件，代码就会立即执行：收到应答和点击注册按钮。

var registerClicked = false;
var ajaxAnswerReceived = false;
function check() {
    if (registerClicked && ajaxAnswerReceived) {
         // do the thing !
    }
}
var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
              ajaxAnswerReceived = true;
                check();
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();
document.getElementById('registerButton').onclick = function(){
     registerClicked = true;
     check();
};

如果您想在没有jQuery的情况下实现这一点，您需要使用onreadystatechange的默认JavaScript调用机制。请记住，jQuery只是默认机制的包装器。我建议您使用jQuery或其他东西来防止出现大量跨浏览器问题和http状态更改逻辑。

在这里阅读所有关于本土的内容：http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

您需要使用回调并存储验证标志布尔值，然后在用户提交注册页面之前需要检查这些布尔值。这是一个jquery实现，但将其转换为常规js并不困难。方法定义如下：

var goodUsername = false;
// keyup handler, pseudo code 
$('#username').keyup(function(event) { 
    // perform the username validation with an ajax call:
    $.ajax({
        url: "validateUsername.php"
    }).done(function(data) {
        // set the goodUsername if its good or not
        if (data.usernameIsGood)
            goodUserName = true;
    });
});
// submit the registration form only if the username has been checked and is good
$('#registrationFormButton').click(function(event){
     if (goodUsername)
         return true; // allows the browser to submit the form
     else
         return false;
});
相关文章：