在HTML文件中，我具有以下脚本:
<head>
<script src="/script1.js" defer></script>
<script src="/script2.js" defer></script>
</head>
script1中，我正在加载另一个HTML文件:(async function() {
await fetch("./header.html")
.then(response => { return response.text() })
.then(data => { document.getElementById("header").innerHTML = data; });
})()
script2中的代码使用header.html加载的script1中的元素。使用当前代码，script2不会等待header.html完全获取。这样的证明是，我在获取
console.log("1")之后添加了script1，并在console.log("2")的开头添加了script2。即使在HTML文件中，我先调用script1然后调用script2，但是console.log('2')出现在console.log('1')之前因此导致
script2读取一些null元素(尚未呈现)。我试图确保在运行script1之前script2完成执行(因此，获取操作完成)。我应该怎么做？ 最佳答案
await不会阻止整个脚本的执行。 await只是将promise隐藏在一个看起来同步的结构中。当在标记为await的函数中满足async时，将执行await之后的表达式(通常是函数调用)，但不会在async函数内部等待返回值。相反，标有async的函数将暂停，并且从调用async函数的那一点开始继续执行，并执行脚本的其余部分(可能还包括其他脚本)，直到完成 promise 为止，然后继续执行脚本到async函数，并从await运算符最初暂停async函数的语句之后的下一个语句继续。
您可以使用如下 promise :
在script1中:
const headerHtml = new Promise((resolve, reject) => {
fetch("./header.html")
.then(response => response.text())
.then(data => {
document.getElementById("header").innerHTML = data;
resolve();
});
});
headerHtml.then(() => {
// Now header.html is fully loaded
// Do what you need to do with the new elements
});
fetch处理程序之前then已被完全解析(或通常在任何地方)，这也将起作用，因为“如果附加了相应的处理程序时 promise 已被履行或拒绝，则该处理程序将被称为” MDN 。