从javascript函数返回json数据

下面的函数从文件中读取JSON数据

function getJsonData(){

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function (){
   if(xhttp.readyState == 4 && xhttp.status == 200){
    var javaobj = JSON.parse(xhttp.response);
    return javaobj;
   }
  }

  xhttp.open("GET", "json_output.json", true)
  xhttp.send();
}

在下面调用

getJsonData

时，它返回

undefined

function CreateTableFromJSON() { 
  var myBooks = getJsonData();
  alert(myBooks)//returns undefined
}

您可以使用javascript回调

---

也可以使用Promise/async/await

---

---

或者，我们可以使用

then

for

Promise
XMLHttpRequest
是异步的，因此
getJsonData
在请求完成之前返回。尝试使用回调。请研究javaScript中的异步函数。要实现类似的功能，最好将fetch与async/await一起使用
function getJsonData(cb) {

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var javaobj = JSON.parse(xhttp.response);
      cb(javaobj);
    }
  }
  xhttp.open("GET", "json_output.json", true)
  xhttp.send();

}

function CreateTableFromJSON() {

  getJsonData(function(myBooks){
    alert(myBooks)
  });

}

function getJsonData() {
  return new Promise(resolve => {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        var javaobj = JSON.parse(xhttp.response);
        resolve(javaobj);
      }
    }
    xhttp.open("GET", "json_output.json", true)
    xhttp.send();
  })


}

async function CreateTableFromJSON() {

  var myBooks = await getJsonData();
  alert(myBooks)

}

function getJsonData() {
  return new Promise(resolve => {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        var javaobj = JSON.parse(xhttp.response);
        resolve(javaobj);
      }
    }
    xhttp.open("GET", "json_output.json", true)
    xhttp.send();
  })
}

function CreateTableFromJSON() {
  getJsonData().then(myBooks => alert(myBooks))
}