Loop the http request to the page until status code is 200 and then redirect to that page

Question

I am newbie at js, so I need a good advice how this task can be solved. In my mind it might be look like this, but it is definitely not working right:

    while (status !== 200) { checkPage(); }
    function checkPage() {
        var xhr = new XMLHttpRequest(),
            method = "GET",
            url = link;
        xhr.open(method, url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                status = xhr.status;
                return true;
            }
        }
        xhr.send();
    }

Does this answer your question? [Wait until all jQuery Ajax requests are done?](https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done) — Alon Eitan, Apr 24 '20 at 11:38
Why do you want to make multiple GET requests to the same end point? That’s a really bad idea. — terrymorse, Apr 24 '20 at 11:48
@terrymorse The OP wrote _"In my mind it might be look like this..."_ so I think it's should be taken as a pseudo code — Alon Eitan, Apr 24 '20 at 11:53
the page that I am accessing sometimes throws out 204 code and I need to continue to try it until I get 200, and then redirect to it — Slava A, Apr 24 '20 at 11:58
Does this answer your question? [JavaScript: Asynchronous method in while loop](https://stackoverflow.com/questions/43064719/javascript-asynchronous-method-in-while-loop) — Heretic Monkey, Apr 24 '20 at 16:56

score 1 · Accepted Answer · answered Apr 24 '20 at 16:45

XMLHttpRequest is asynchronous by default (and a good practice, as calling it synchronously will block the browser). Therefore, the response from XMLHttpRequest.send() should be handled asynchronously.

Calls to asynchronous function are handled traditionally with a callback function, using a pattern like this:

function myCallback (response) {
  console.log('response from async function:', response);
}

function callAsyncFunction (myCallback) {
  const async = new AsyncFunction();

  async.oncompletion = function (response) {
    myCallback(response);
}

Using that pattern, the checkPage() function can be rewritten to use a callback function when it receives the desired 200 response code:

// callback to receive the 200 response
function handle200 (response) {
  console.log('handle200 has received:', response);
}

function checkPage(callback) {
  const xhr = new XMLHttpRequest(),
    method = "GET",
    url = "http://your-target-url-here";

  // initialize a new GET request
  xhr.open(method, url, true);

  // respond to every readyState change
  xhr.onreadystatechange = function () {

    // ignore all readyStates other than "DONE"
    if (xhr.readyState !== XMLHttpRequest.DONE) { return; }

    // call the callback with status
    if (xhr.status === 200) {
      return callback(xhr.status);
    }

    // got something other than 200,
    // re-initialize and send another GET request
    xhr.open(method, url, true);
    xhr.send();
  }

  // send the initial GET request
  xhr.send();
}

// call checkPage once
checkPage(handle200);

References:

Thanks! Your answer was helpful! But I had one question, sometimes the answer 200 comes, but the redirect does not occur. What could be the problem? I suspect this is due to the docs google viewer that I am accessing. He has not been supported for a long time — Slava A, Apr 27 '20 at 07:05
So you get a 200 response, then change `location.href`, but the new page sometimes doesn't load? There must be something wrong with the server then. — terrymorse, Apr 27 '20 at 14:33

Loop the http request to the page until status code is 200 and then redirect to that page

1 Answers1