Javascript 加载屏幕在处理HTTP请求时卡住

我有一个javascript代码，可以从另一个网页获取一些内容来显示（使用HTTPGET）。经过一些测试，认识到这个过程需要一些时间，我决定添加一个加载动画，一直运行到代码结束，以从不同的网页获取内容。正如所设想的，当内容完全加载时，加载动画将消失。 我唯一的问题是，当进程开始时，加载动画会被卡住。即使在我将流程定义为异步之后，也会发生这种情况。这是我的代码：

window.addEventListener（'load'，function（）{
setTimeout（函数（）{
var响应=httpGet（“https://pub.s7.exacttarget.com/akduztal2rq");
}，2000）；//GET方法在加载动画2秒后执行
});
异步函数httpGet（theUrl）{
xmlhttp=新的XMLHttpRequest（）；
等待xmlhttp.open（“GET”，theUrl，false）；
等待xmlhttp.send（）；
var r=xmlhttp.responseText；
document.getElementById（“h”）.innerHTML=r；
document.getElementById（“预加载”）.style.display=“无”；
}

---

这是因为您试图从与您的源域不同的源域访问资源。长话短说，原因是关于

CORS

为了使此类请求成为可能，响应标头应包含以下标头：

接受控制允许来源：yourdomain.com
访问控制允许标题：获取

---

更多信息：

您遇到网络错误，因此Javascript引发异常，并且您删除加载的代码从未到达，请尝试以下操作：

async function httpGet(theUrl) {
  xmlhttp = new XMLHttpRequest();
  try{
    await xmlhttp.open("GET", theUrl, false);
    await xmlhttp.send();
  }catch(error){
    console.log(error)
  }finally {
    var r = xmlhttp.responseText;
    document.getElementById("h").innerHTML = r;
    document.getElementById("preloader").style.display = "none";
  }
}

了解有关try/catch/finally的更多信息：

---

使用

finally

块删除加载是一种非常常见的模式，因为您总是希望删除它，要么失败，要么成功。

查看您的代码，我注意到您在XMLHttpRequest上使用的是async/Wait。 我不认为他们会回报承诺，与等待一起使用

如果要使用async/await，请尝试使用fetchapi

setTimeout（函数（）{
var响应=httpGet（“https://jsonplaceholder.typicode.com/todos/1");
}, 3000);
函数httpGet（theUrl）{
xmlhttp=新的XMLHttpRequest（）；
open（'GET'，'theUrl'，true）；
xmlhttp.send（）；
xmlhttp.onload=函数（）{
var r=xmlhttp.responseText；
document.getElementById（“h”）.innerHTML=r；
document.getElementById（“预加载”）.style.display=“无”；
}
};

您遇到了一个网络错误，这意味着无法访问
xmlhttp.open
之后的代码，有几种方法可以解决此问题，但最简单的方法是使用try/catch尝试了它，结果适得其反，我在GET中使用的网页内容被阻止，因此无法正常工作。不管怎样，谢谢你的帮助。没用。在我的服务器中，我没有收到网络错误，加载动画被卡住，然后加载网页的内容。因此，通常我会在加载动画仍在运行时尝试执行GET。还有什么想法吗？谢谢
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.mocky.io/v2/5d249d172f0000736f241b00', true);
  xhr.send();
  xhr.onload = function () {
    console.log('hi 1')
  };