Javascript reloading page after api fetch complette-CodePudding

I am currently working on a Worlde clone written in javascript. I use rapid api to fetch the five letter word in a function calles getWord. I also use a function call it onceADay so the getWord function only get called once. At the end of the onceAday function i call location.reload(); so once a new word been loaded the website shoud refresh it self hence you can start the game again. My problem is that the reload page function runs so quickly it doesnt let the fetch to get a new word. i tried async/await but it did not worked. i also tried to delay te refresh.. but it doesnt 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 shouyld repeat the fetch. but it just crashed the whole site. At this point i am clueless about how could i fix it .. i just run out of options here. i am quite nood at 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 heres 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 refresh 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 unrelyable. i added 2000 minisec delay and if the backend is a bit slower then usual it doesnt 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.

CodePudding user response：

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();

});

}

CodePudding user response：

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.