javascript - 如何仅在从 xmlhttp 调用接收到数据时才运行函数？

Question

只有当我的 getData() 函数返回数组时，如何运行 init() 函数在我的 dom 上设置innerHTML？

我很确定我需要在这里有某种异步等待函数，但我正在学习闭包 同时，我不确定我该如何做到这一点。

代码想要这样的东西:

const uiController = (function () {
  let data;

  const getData = async () => {
    const xml = new XMLHttpRequest();

    xml.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        data = getArray(JSON.parse(this.responseText));
      }
    };

    xml.open("GET", "data.json", true);
    xml.send();


  };

  getData();


  // I only want init to run when getData() is finished and my data variable is updated with the fetched data. 

  // Something similar to react ComponentDidMount
  const init = () => {

  document.getElementById("article-grid").innerHTML = `<div>${data}</div>`

  }

谢谢:)

Answer 1

const uiController = (function () {
let data;
// Something similar to react ComponentDidMount
const init = () => {
  document.getElementById("article-grid").innerHTML = `<div>${data}</div>`
}
const getData = async () => {
  const xml = new XMLHttpRequest();

  xml.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      data = getArray(JSON.parse(this.responseText));
      init(); // call inside readyState === 4 
    }
  };

  xml.open("GET", "data.json", true);
  xml.send();
};

getData();