api获取完成后Javascript重新加载页面答案

【问题标题】：Javascript reloading page after api fetch completteapi获取完成后Javascript重新加载页面
【发布时间】：2022-12-19 21:28:48
【问题描述】：

我目前正在研究用 javascript 编写的 Worlde 克隆。我使用快速 api 在调用 getWord 的函数中获取五个字母的单词。我还使用了一个调用它 onceADay 的函数，因此 getWord 函数只被调用一次。在 onceAday 函数结束时，我调用 location.reload();因此，一旦加载了一个新词，网站就会自行刷新，这样您就可以重新开始游戏了。我的问题是重新加载页面功能运行得太快以至于无法获取新词。我试过异步/等待，但没有用。我也试图延迟 te 刷新.. 但它不能可靠地工作。我还尝试将最后一个单词保存在 localObject 中，并在 onceADay 函数中实现一个 while 循环。所以当前一个单词等于当前单词时，它应该重复获取。但它只是让整个网站崩溃。在这一点上，我对如何修复它一无所知。我只是在这里用完了选项。我对 javascript 很在行，所以我希望有更多经验的人可以给我一个解决方案。我在我的 git repo ( https://github.com/dodoo86/WordleJS ) 上得到了整个项目

还有我上面提到的功能：

这就是我使用异步等待获取单词的方式

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

比我检查一天是否过去

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

    localStorage.yourapp_date = date;
    return true;
}

如果是这样，它应该每天运行一次以下内容

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

}

通过这种方式，它可以在获取之前刷新站点，因此当我将时钟设置为第二天时，单词保持不变。如果我延迟重置，它会非常不可靠。我添加了 2000 毫秒的延迟，如果后端比平常慢一点，它不会刷新单词，如果它更快的话。所以我需要一种防弹方法来确保这个词总是在页面之前刷新。

【问题讨论】：

“它只是让整个网站崩溃”——这是什么意思？
while 循环不间断地继续运行我使用代码 code while (localStorage.getItem("lastWordle") == localStorage.getItem("wor") { getWord(); if (localStorage.getItem("lastWordle" ) != localStorage.getItem("wor") { 中断} }
您希望用户在您打开的页面前停留多长时间，以便首先与此相关？
只需将其余代码放在 then 回调中。
什么？我不明白你的回答..它不必打开，因为倒计时保存在本地对象中，用户可以关闭浏览器

标签： javascript api fetch fetch-api

【解决方案1】：

尝试让你的函数异步异步函数 runOncePerDay() { 如果 (!hasOneDayPassed()) 返回 false；

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

【讨论】：