onClick，等待现有的XMLhttprequest完成

如何解决onClick，等待现有的XMLhttprequest完成

我正在为这个挑战而苦苦挣扎...

我需要做三件事：

• 单击按钮/表单提交后，等待下一页完成加载。
• 然后，等待页面上现有的API / GET请求完成。
• 然后检查该API请求的结果。

我遇到的问题是，当我单击按钮时，下一页甚至没有机会完成加载，并且我的API检查立即执行。

我查看了许多解决方案，异步/等待，有些建议不要使用setTimeOut。而且，我似乎仍然无法克服第一个障碍，即等待页面完成加载并允许现有的API调用完成。

如何等待现有的API调用完成运行？

let button = document.getElementById("signin");
button.setAttribute("onClick","fireTracking()");

function ajax(url) {
    return new Promise(function(resolve,reject) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        resolve(this.responseText);
      };
      xhr.onerror = reject;
      xhr.open('GET',url);
      xhr.send();
    });
  }
  
function fireTracking() {
    ajax("www.myurl.com/getstatus")
    .then(function(result) {
    // Code depending on result
    console.log(result);
    console.log("fire event...")
  })
  .catch(function() {
    // An error occurred
  });
}

要混淆的是，页面的URL是相同的。因此，从本质上讲，我找不到其他URL。

我开始认为我可能需要使用setTimeout？ IE，请等待1秒钟，然后进行新的api调用？

请注意，这是代码在应用程序的顶部运行。我使用的是AB测试工具，因此我实际上是在已编译的代码之上尝试使其正常工作。

解决方法

该按钮在触发form函数时正在提交fireTracking。

所以...这是提交您刷新页面，Ajax请求的结果只是失去了。

您必须prevent the normal submit behavior。

这是您代码中要做的“最小更改”：

let button = document.getElementById("signin");
button.setAttribute("onClick","fireTracking(event)");  // Add the event argument

function ajax(url) {
    return new Promise(function(resolve,reject) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        resolve(this.responseText);
      };
      xhr.onerror = reject;
      xhr.open('GET',url);
      xhr.send();
    });
  }
  
function fireTracking(event) {  // Add the event argument
    event.preventDefault()  // Add this
    ajax("www.myurl.com/getstatus")
    .then(function(result) {
    // Code depending on result
    console.log(result);
    console.log("fire event...")
  })
  .catch(function() {
    // An error occurred
  });
}

但是！的一个好习惯是使用.addEventListener()为该按钮设置事件处理程序，就像提到的@epacarello。