为什么我的网站在每个文件都已成功加载后显示加载图标？

Question

所以我学习了 JavaScript Promises 并创建了一个网页，显示从目录中的另一个文件派生的文本。它成功加载了站点和所有内容，但问题是即使在站点加载并从其他网页访问数据之后，它仍显示加载图标。我尝试从文件中删除承诺，当我再次访问该网页时，没有加载图标。所以我觉得这个promise有问题。

1. controller.js（主要 JS 文件）

function myDisplayer(some) {
  document.write(some);
}
async function loadController(){
    let myPromise = new Promise(function(myResolve, myReject) {
      let req = new XMLHttpRequest();
      req.open('GET', "controllerDummy.html");
      req.onload = function() {
        if (req.status == 200) {
          myResolve(req.response);
        } else {
          myReject("File not Found");
        }
      };
      req.send();
    });
    myDisplayer(await myPromise);
}

loadController()

2. controller.html（主文件）

<!DOCTYPE html>
<html style="background-color: black;">
<head>
    <script type="text/javascript" src="controller.js"></script>
</head>
<body>
    
</body>
</html>

3. controllerDummy.html（承诺从中提取响应文本的虚拟文件）

<!DOCTYPE html>
<html style="background-color: black;">
    <body>Loading Controller</body>
</html>

这些都是文件，现在是截图。

如您所见，promise 已加载，但站点仍在加载图标。有什么办法解决这个问题吗？这种方式过时了吗？

Answer 1

兑现承诺

function myDisplayer(some) {
  document.write(some);
}
async function loadController(){
    let myPromise = new Promise(function(myResolve, myReject) {
      let req = new XMLHttpRequest();
      req.open('GET', "controllerDummy.html");
      req.onload = function() {
        if (req.status == 200) {
          myResolve(req.response);
        } else {
          myReject("File not Found");
        }
      };
      req.send();
    });
    
    myPromise.then((result)=>{
      myDisplayer(result);
    }).catch((error)=>{
      //handle error
    });
    
}

loadController()

为什么我的网站在每个文件都已成功加载后显示加载图标？

Why is my website showing a loading icon when every file has loaded successfully?

html

javascript

asynchronous

xmlhttprequest

es6-promise