在异步 XMLHttpRequest 的数据可用后执行代码

Question

我需要从服务器加载一个 JSON 文件，稍后我将使用它来填充网站上的内容。使用XMLHttpRequest 加载 JSON 文件应该是异步的，并且可以尽快发生。然而，填充内容需要加载 DOM。

现在，我调用xhr.open('GET', 'records.json', false) 使请求同步。当加载和解析 JSON 所花费的时间比浏览器加载 DOM 所花费的时间更多时，这是必要的。当这种情况发生时（即连接速度较慢），DOM 将被加载，DOMContentLoaded 事件监听器中的代码将在 listData 上执行，undefined 仍然是 undefined。不好。

如何使用异步XMLHttpRequest 并同时在DOMContentLoaded 上执行我的代码？我想在 listData 完全加载（即 JSON.parse() 完成）并且 DOM 可用后立即执行我的代码。当这两个条件都满足时，我就可以走了。

function thisFunctionIsCalledFromTheHtml() {
    // Get the JSON data by using a XML http request
    var listData;
    var xhr = new XMLHttpRequest();
    // The request needs to be synchronous for now because on slow connections the DOM is ready
    // before it fetches everything from the json file
    xhr.open('GET', 'records.json', false);
    xhr.addEventListener("load", function() {
      if (xhr.readyState === 4) {
          if (xhr.status === 200) {
              listData = JSON.parse(xhr.responseText);
          } else {
              console.error('Error: ' + xhr.status + ' ' + xhr.statusText);
          }
      }
    });
    xhr.addEventListener("error", function() {
      console.error('Error: ' + xhr.status + ' ' + xhr.statusText);
    });
    xhr.send(null);

    document.addEventListener("DOMContentLoaded", function() {
        var placeholderKeys = [];
        for (var key in listData) {
            var value = listData[key];
            placeholderKeys = placeholderKeys.concat(value.title, value.abbr, value.keywords);
        }

        var filterInput = document.getElementById('input-id');
        filterInput.placeholder = placeholderKeys[
            Math.floor(Math.random() * placeholderKeys.length)
        ];
    });
}

Answer 1

您可以在异步获取请求中使用 promise，并将成功返回的数据附加到 DOMContentLoaded 回调中可用的内容，您可以在其中重复检查数据是否已分配。

let myData;

let doAsyncOperation = (param) => {
  if ( window.Promise ) {
    let promise = new Promise( (resolve, reject) => {

      // Do your async request here...
      window.setTimeout(() => {
        // resolve the promise with successfully returned data from get req.
        resolve(`Hello ${param}`)
      }, 1000);

      // reject the promise if your request returns an error
      if (typeof param !== "string") reject("param must be a string");

    })
    return promise;
  } else {
  	console.log("Sorry no promise for you, use a fallback ")
  }
} 

doAsyncOperation("Foo !").then(
  // on success do something with your data.
  (data) =>  myData = data,
  (err) => console.log(err)
);

// Inside DOMContentLoaded callback check if myData is available.
document.addEventListener("DOMContentLoaded", (event) => {
  let loop = () => {
  	(myData) ? console.log(myData) : window.setTimeout(loop, 100);
  };
  loop();
});

Answer 2

当我需要等待几个异步事件时，我个人的做法通常是这样的：

const EVENT0 = 0x1;
const EVENT1 = 0x2;
const ALL_READY = 0x3;

var ready = 0;
init();

function init() {
  asyncRequest0();
  asyncRequest1();

  var waitFunc;

  (waitFunc = function() {
    if(ready == ALL_READY) {
      goOn();
    }
    else {
      setTimeout(waitFunc, 10);
    }
  })();
}

function goOn() {
  console.log('Here we go!');
}

function asyncRequest0() {
  // some callback will do:
  ready |= EVENT0;
}

function asyncRequest1() {
  // some callback will do:
  ready |= EVENT1;
}

因此，基本上，每个异步事件都会在其工作完成后在“就绪”变量中设置一个位。 waitFunc() 函数会耐心等待所有事件完成（无论以何种顺序）并调用 goOn() 函数。

现在，应用于您的代码：

const DOM_READY = 0x1;
const XHR_READY = 0x2;
const ALL_READY = 0x3;

var ready = 0;
var listData;

init();

function init() {
  document.addEventListener("DOMContentLoaded", function() {
    ready |= DOM_READY;
  });

  var xhr = new XMLHttpRequest();

  xhr.open('GET', 'records.json', false);
  xhr.addEventListener("load", function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        listData = JSON.parse(xhr.responseText);
      } else {
        listData = false;
        console.error('Error: ' + xhr.status + ' ' + xhr.statusText);
      }
      ready |= XHR_READY;
    }
  });
  xhr.addEventListener("error", function() {
    listData = false;
    ready |= XHR_READY;
    console.error('Error: ' + xhr.status + ' ' + xhr.statusText);
  });
  xhr.send(null);

  var waitFunc;

  (waitFunc = function() {
    if (ready == ALL_READY) {
      goOn();
    } else {
      setTimeout(waitFunc, 10);
    }
  })();
}

function goOn() {
  console.log('Here we go!');
  // do something with listData
}

您实际上并不需要仅针对 2 个事件的位掩码，但这是一次测试多个事件的便捷方式。