onClick，等待现有的 XMLhttprequest() 完成

Question

我在这个挑战中有点挣扎...

我需要做三件事：

onclick of a button/form 提交，等待下一页完成加载。
然后，等待现有的 API/GET 请求在页面上完成。
然后检查 API 请求的结果。

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

我看了很多解决方案，async/wait，有些建议不要使用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 测试工具，所以我基本上是在尝试让它在已经编译的代码之上工作。

Answer 1

该按钮在触发您的 fireTracking 功能时正在提交 form。

所以...提交正在刷新您的页面，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 提到的那样。

onClick，等待现有的 XMLhttprequest() 完成

onClick, wait for existing XMLhttprequest() to complete

javascript

api

xmlhttprequest

fetch