javascript - 在来自异步 XMLHttpRequest 的数据可用后执行代码

Question

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

目前，我调用 xhr.open('GET', 'records.json', false) 使请求同步。当加载和解析 JSON 所花费的时间比浏览器加载 DOM 所花费的时间更多时，这是必要的。当这种情况发生时(即连接速度较慢)，DOM 将被加载并且 DOMContentLoaded 事件监听器中的代码将在 listData 上执行，它仍然是 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();
});