Javascript 异步等待在ctlr上正常工作+；F5，但当我从一个页面移动到另一个页面时不会

我使用Node.js服务器进行HTTP请求。所以，当我按下Ctrl+F5时，async，await按它应该的方式工作，但当我在页面之间移动并返回到我试图检查的同一页面时。它的工作方式不同。在这两种情况下，数据都是从RESTAPI获取的，但在ctrl+F5上，它会等待，而在正常的页面间移动时，它不会等待，因此不会显示从JS生成的HTML代码，即使它在那里-\

下面给出了JS代码

async function addAllSubjects() {


    await fetch('http://localhost:2000/getallsubjects')
        .then(async(res) => await res.json())
        .then(async(obj) => {
            let html = `<div style="width: 500;"> <select  name="subjects_select" class="selectpicker dropdown-dense" multiple data-width="100%" data-height="50%" data-size="${obj.length}" data-selected-text-format="count > 3" data-style="btn-primary" title="Choose one of the following..." data-actions-box="true" data-header="Select Subjects" data-live-search="true"
              data-live-search-placeholder="Search ..."> <optgroup label="Subjects" id="dynamic_subjects"> `  // to set style of this selector u need to set styles through css file such as in asssign-course.css
              let options =  await obj.map((value, index) => `<option value="${value.sbt_id}">${value.sbt_id}-${value.sbt_name}-${value.semester}</option>`)
            options = options.join('\n') + "</optgroup>"
            html += options + "</select></div>"
            console.log(obj[1])
            document.getElementById("form-group").innerHTML = html
        }).catch(err => console.error(err))




}
async function addallteacherswithids() {
    await fetch('http://localhost:2000/allteachernameid')
        .then(res => res.json())
        .then(obj => {
            console.log(obj[0].t_id + " Teacher check")
            let html = obj.map((value, index) => {

                let a = (value.t_name + "," + value.t_id)
                console.log(a + "test checj teacher")
                if (value.t_id === "") return ""
                return `<option value="${index}">${a}</option>`

            }).join("\n")
            document.getElementById('teachernameid').innerHTML = html


        })


}

异步函数addAllSubjects（）{
待命http://localhost:2000/getallsubjects')
.then（异步（res）=>await res.json（））
.然后（异步（obj）=>{
设html=``//要设置此选择器的样式，您需要通过css文件（如asssign-course.css）设置样式
让options=await obj.map（（value，index）=>`${value.sbt_id}-${value.sbt_name}-${value.sement}`）
选项=选项。连接（'\n'）+“”
html+=选项+“”
console.log（obj[1]）
document.getElementById（“表单组”）.innerHTML=html
}).catch（err=>console.error（err））
}
异步函数addallteacherswithids（）{
待命http://localhost:2000/allteachernameid')
.then（res=>res.json（））
.然后（obj=>{
console.log（obj[0].t_id+“教师检查”）
让html=obj.map（（值，索引）=>{
设a=（value.t_name+，“+value.t_id）
console.log（a+“测试检查教师”）
如果（value.t_id==“”）返回“”
返回`${a}`
}).join（“\n”）
document.getElementById（'teachernameid'）。innerHTML=html
})
}

Ctrl+F5上的Node.js终端

=>Node.js终端移动到其他页面，然后返回到当前页面：-

浏览器Google Chrome版本：-78.0.3904.108 操作系统：-Windows 10

旁注这些函数是在下面的Js文件中调用的，我没有在这里介绍它们，因为这会简单地为问题添加太多不必要的代码

---

感谢您提前提供帮助。

请您尝试将代码简化为类似于，

const obj=await（await-fetch（'http://localhost:2000/getallsubjects“））.json（）

这可以包装在

try/catch

块中，html修改代码也可以跟随

主要区别在于，导航时会得到304s，因此只需确保304s得到适当处理，并且obj始终有一个值

---

另外，请检查浏览器上的“网络”选项卡，查看从XHR请求返回的内容类型。

您使用

async/await

的方式是错误的，这不是使用

async/await

的方式

.map

不是承诺，因此您不必在

.map

这就是它的用法，请阅读async/Wait

异步函数addAllSubjects（）{ 试一试{ const request=等待获取（'http://localhost:2000/getallsubjects') const obj=wait request.json（） 让html=`` 让options=await obj.map（（value，index）=>`${value.sbt_id}-${value.sbt_name}-${value.sement}`） 选项=选项。连接（'\n'）+“” html+=选项+“” 返回html }捕获（错误）{ 控制台错误（错误） 返回空 } } addAllSubjects（）。然后（html=>{ if（html！==null）document.getElementById（'form-group'）。innerHTML=html })

---

所以我检查了一些东西，结果发现是缓存问题。包括隐姓埋名模式在内的浏览器正在从缓存中检索数据，这导致了诸如304错误之类的问题。所以我将标题中的所有src和链接移动到主体的末尾部分，然后在标题中添加这些元标记

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

结果，错误得到了解决

---

评论部分是我对可能发生的情况的想法

而且。。。实际问题是什么？在JS代码中，addAllSubjects（）函数生成HTML，在这两种情况下都会生成HTML，但在通过CTRL+F5刷新页面的情况下是可见的，但在不同页面之间移动并返回到addAllSubjects（）所在的同一测试页面时则不可见有人打电话给我我现在就查我不知道为什么会来。。试着抓东西并不能解决问题。然而，这是一种更干净的方法，谢谢你。但我没法查出来，因为。。4.我正在处理此事，但找不到根本原因。。我所看到的是，在CTRL+5的情况下，header具有Connection:keep-alive，而在另一种情况下，没有任何内容作为连接，并且这两个函数中的数据在上下文中是相同的XHR@MuhammadUmarKhan304表示基于浏览器中保存的数据的缓存副本，内容没有改变。如果服务器发回

etag

响应头，或者客户端发送第二次请求头

（如果自

以来进行了修改），则此检查将在服务器上进行，如果没有更改，它将以304响应。为了防止这种情况发生，不要从服务器发送

etag

，或者在客户端跳过缓存，例如在

fetch末尾添加时间戳(`http://....${Date.now（）`

，或使用

no store

，

fetch（`http://....“，{cache:“无存储”}）

。是的，这导致了错误304，但我需要数据及时显示的部分仍然缺失。它是HTML格式的，可以在inspect上查看。但没有及时显示，因为页面加载速度比其组件快。您好，是的，我理解这部分，但我现在太困惑，无法清晰地思考，但这并没有解决问题问题。我认为这是页面重定向的问题，因为我注意到其他页面也存在同样的行为。错误304在页面重定向时仍然存在，我暂时无法删除

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />