使用Javascript向服务器发送多个请求，直到服务器返回200

Question

我已经创建了一个用户在等待其他应用程序重新启动时查看的html页面。我创建了一个JavaScript脚本，它向应用程序发出多个请求，直到应用程序返回200.但是，当我尝试打开我的html页面时，浏览器崩溃。任何人都可以看到我的代码有什么问题：

var responseStatus = 404; 
var numberOfTries = 0; 
var request = new XMLHttpRequest(); 
while(responseStatus != 200){ 
    console.log("Checking if restart has completed. Attempt number: " + numberOfTries); 
    request.open('GET', 'applicationurl', true); 
    request.onreadystatechange = function(){ 
     if (request.readyState === 4){ 
      console.log("Request Status: " + request.status); 
      responseStatus = request.status; 
      console.log("Response Status: " + request.status); 
      if (request.status != 200) { 
       numberOfTries++; 
       console.log("Restart has not yet completed! NumberOfTries: " + numberOfTries); 
      } 
     } 
    }; 
    request.send(); 
} 
console.log("Server has successfully restarted"); 

Answer 1

您的方法发送多个请求，但它不会等待它们作出响应。

这里是它如何工作的：

• 一个XMLHttpRequest创建
• 回调和数据分配给它
• 该对象被发送到服务器
• 那么while循环结束，再次运行，不等待回调运行

因此，很多o f XMLHttpRequest对象被创建并且许多请求同时运行，这不是您想要的。

你可以这样做2种方式：

• 包成一个功能，当它失败时调用它（preferrable）;
• 设置一些间隔等待响应

1的方法：

function tryRequest(numAttempts) { 
    var responseStatus = 404; 
    var request = new XMLHttpRequest(); 

    console.log("Checking if restart has completed. Attempt number: " + numAttempts); 
    request.open('GET', 'applicationurl', true); 
    request.onreadystatechange = function(){ 
     if (request.readyState === 4){ 
      console.log("Request Status: " + request.status); 
      responseStatus = request.status; 
      console.log("Response Status: " + request.status); 
      if (request.status != 200) { 
       console.log("Restart has not yet completed! NumberOfTries: " + numAttempts); 
       tryRequest(numAttempts + 1) 
      } 
     } 
    }; 
    request.send(); 

    console.log("Server has successfully restarted"); 
} 
tryRequest(0); 

第二个办法：

var responseStatus = 404; 
var numberOfTries = 0; 
var request = new XMLHttpRequest(); 
var interval = setInterval(tryRequest, 1000) 

function tryRequest() { 
    console.log("Checking if restart has completed. Attempt number: " + numberOfTries); 
    request.open('GET', 'applicationurl', true); 
    request.onreadystatechange = function(){ 
     if (request.readyState === 4){ 
      console.log("Request Status: " + request.status); 
      responseStatus = request.status; 
      console.log("Response Status: " + request.status); 
      if (request.status != 200) { 
       numberOfTries++; 
       console.log("Restart has not yet completed! NumberOfTries: " + numberOfTries); 
      } else { 
       clearInterval(interval); 
       console.log("Server has successfully restarted"); 
      } 
     } 
    }; 
    request.send(); 
    } 

} 

（声明：我没有测试两者则）

Answer 2

您可以使用代码，如

var responseStatus = 404; 
var numberOfTries = 0; 
function check(){ 
     var request = new XMLHttpRequest(); 
     console.log("Checking if restart has completed. Attempt number: " + numberOfTries); 
     request.open('GET', 'applicationurl', true); 
     request.onreadystatechange = function(){ 
      if (request.readyState === 4){ 
       console.log("Request Status: " + request.status); 
       responseStatus = request.status; 
       console.log("Response Status: " + request.status); 
       if (request.status != 200) { 
        numberOfTries++; 
        console.log("Restart has not yet completed! NumberOfTries: " + numberOfTries); 
        var tmp = setTimeout(function(){ check() },5000); // check after 5 second 
       } elseif (request.status == 200) { 
        console.log("Server has successfully restarted"); 
       } 
      } 
     }; 
     request.send(); 

    } 

//调用第一次

check(); 

Answer 3

最好的方式做到这一点（在我看来）是实际结合起来@ serge1peshcoff的两个选项。将该呼叫写为一个函数，在响应失败时自行调用，和设置超时。对于大多数用途，您不希望在上一个请求之后立即发送另一个请求，您希望等待至少一秒或五秒以防止垃圾邮件服务器（您也没有指出您期望的客户端数量。对你的浏览器来说糟糕的是服务器可能很糟糕，即使在你的web应用程序完全启动并返回200之前，服务器也可能处理请求）。

此外，setTimeout比setInterval更好，因为您在每次往返时都明确地重置它。从@serge

借款：

function tryRequest(numTries) { 
    var responseStatus = 404; 
    var request = new XMLHttpRequest(); 
    numTries = numTries || 0; 

    console.log("Checking if restart has completed. Attempt number: " + numAttempts); 
    request.open('GET', 'applicationurl', true); 
    request.onreadystatechange = function(){ 
     numTries++ 

     if (request.readyState === 4){ 
      console.log("Request Status: " + request.status); 
      responseStatus = request.status; 
      console.log("Response Status: " + request.status); 
      if (request.status != 200) { 
       console.log("Restart has not yet completed! NumberOfTries: " + this.attempts); 
       setTimeout(tryRequest.bind(null, numTries), 5000); // five seconds 
      } 
     } 
    }; 
    request.send(); 

    console.log("Server has successfully restarted"); 
} 
tryRequest();