How can I use fetch in while loop

Question

My code is something like this:

var trueOrFalse = true;
while(trueOrFalse){
    fetch('some/address').then(){
        if(someCondition){
            trueOrFalse = false;
        }
    }
}

But I can not issue the fetch request. It seems like while loop is schedule many fetches into next tick. But never skip to next tick. How can I solve the problem?

Answer 1

while(true) creates an infinite loop, which will attempt to call fetch infinitely many times within a single "tick". Since it never finishes issuing new fetch calls, it never gets to the next tick.

This function is very CPU-intensive and will probably lock up the entire page.

---

What's the solution?

What you are probably trying to do is keep fetching until the result satisfies some condition. You can achieve that by checking the condition in the then callback, and re-issuing the fetch if it is false:

var resultFound = false;

var fetchNow = function() {
  fetch('some/address').then(function() {
    if(someCondition) {
      resultFound = true;
    }
    else {
      fetchNow();
    }
  });
}

fetchNow();

This way, instead of

fetch!
fetch!
fetch!
fetch!
...

...the behavior is going to be

fetch!
  wait for response
  check condition
if false, fetch!
  wait for response
  check condition
if true, stop.

...which is probably what you expected.

Answer 2

Now with async/await we can use awesome while loops to do cool stuff.

var getStuff = async () => {

    var pages = 0;

    while(true) {

        var res = await fetch(`public/html/${pages ++}.html`);

        if(!res.ok) break; //Were done let's stop this thing

        var data = await res.text();

        //Do something with data

    };

    console.log("Look ma! I waited!"); //Wont't run till the while is done

};