Javascript reloading page after api fetch complette

Question

I am currently working on a Worlde clone written in JavaScript. I used the rapid API to fetch the five letter word in a function called getWord.

I also used a function called onceADay so the getWord function only gets called once. At the end of the onceAday function, I call location.reload(), so once a new word has been loaded, the website should refresh itself, hence you can start the game again. My problem is that the reload page function runs so quickly that it doesn’t let the fetch get a new word. I tried async/await but it did not work. I also tried to delay to refresh.. but it doesn't work reliably. I also tried to save the last word in a localObject and implement a while loop in the onceADay function.. so while the previousword is equal to current word it should repeat the fetch. but it just crashed the whole site. At this point I am clueless about how I could fix it. I just run out of options here. I am quite new to JavaScript, so I am hoping maybe someone who has more experience could give me a solution. I got the whole project on my git repo ( https://github.com/dodoo86/WordleJS )

Also, here’s the functions I mentioned above.

This is how I fetch the word using async await

async function fetchWordJSON() {
    const response = await fetch('https://squirrelle.onrender.com/word');
    const word = await response.json();
    return word;
}

Than I check if a day passed

function hasOneDayPassed() {
    var date = new Date().toLocaleDateString();
    if (localStorage.yourapp_date == date)
        return false;

    localStorage.yourapp_date = date;
    return true;
}

Than if so, it should run the following things once a day

  function runOncePerDay() {
    if (!hasOneDayPassed()) return false;

 

    fetchWordJSON().then(word => {
        word;
        localStorage.setItem("wor", word)
    });

    console.log("Word  ", localStorage.getItem("wor"));

    localStorage.setItem("Won", "false");
    wordle = localStorage.getItem("wor").toUpperCase();
    console.log("WordUPSCALE  ", wordle);
    checkLastWinDates();
    localStorage.setItem("gamePlayed", "false");
    location.reload();
}

In this way it refreshes the site before it could fetch, so the word remains the same when i set the clock to a next day. If I do the reset with a delay, it works quite unreliably. I added 2000 minisec delay and if the backend is a bit slower then usual it doesn’t refresh the word if its quicker it does. So I would need a bulletproof method to make sure the word always refresh before the page.

That the while loop just keep going without break i use the code `code` while (localStorage.getItem("lastWordle") == localStorage.getItem("wor") { getWord(); if (localStorage.getItem("lastWordle") != localStorage.getItem("wor") { break} } — David T Laszlo, Dec 19 '22 at 13:10
How long do you expect the user to be sitting in front of your opened page, for this to become relevant in the first place? — CBroe, Dec 19 '22 at 13:11
Just place the rest of the code inside the `then` callback.. — Keith, Dec 19 '22 at 13:13
what? i dont understand your answer.. it doesnt have to be opened since the countdown is saved in a local object the user can close the browser — David T Laszlo, Dec 19 '22 at 13:13
@Keith i will give it a try thank you `fetchWordJSON().then(word => { word; localStorage.setItem("wor", word) console.log("Word ", localStorage.getItem("wor")); localStorage.setItem("Won", "false"); wordle = localStorage.getItem("wor").toUpperCase(); console.log("WordUPSCALE ", wordle); checkLastWinDates(); localStorage.setItem("gamePlayed", "false"); location.reload(); });` do you mean like this? — David T Laszlo, Dec 19 '22 at 13:15
Yes, as this will then wait for `fetchWordJSON` to run, the alternative would be to use `async / await` but for something as simple as this it's not required. — Keith, Dec 19 '22 at 13:16
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — gre_gor, Dec 19 '22 at 14:33

score 0 · Accepted Answer · answered Dec 19 '22 at 13:17

You should put the reload inside the then block, so it will be executed after fetching.

function runOncePerDay() {
    if (!hasOneDayPassed()) return false;

    fetchWordJSON().then(word => {
        word;
        localStorage.setItem("wor", word);
        console.log("Word  ", localStorage.getItem("wor"));
        localStorage.setItem("Won", "false");
        wordle = localStorage.getItem("wor").toUpperCase();
        console.log("WordUPSCALE  ", wordle);
        checkLastWinDates();
        localStorage.setItem("gamePlayed", "false");
        location.reload();

});

}

Thank You Keith and Rachel and for all of you it seems it works this way.. — David T Laszlo, Dec 19 '22 at 13:35

score 0 · Answer 2 · answered Dec 19 '22 at 13:18

Promises run asynchronously. In your code here:

function runOncePerDay() {
    ...
    fetchWordJSON().then(word => {
        word;
        localStorage.setItem("wor", word)
    });
    ...
    location.reload();
}

The callback passed to .then() is waiting on the fetch, but the execution in the rest of the runOncePerDay function continues, and location.reload() gets called, thus reloading the page before the fetch has complete. (It's a race condition)

To fix this, put the location.reload() after the logic in the .then() callback. So everything in your localStorage gets set before the reload happens.

Javascript reloading page after api fetch complette

2 Answers2