javascript - 从 javascript 函数返回 json 数据

Question

以下函数从文件中读取 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
}

Answer 1

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)
  });

}

您可以使用 JavaScript 回调

<小时/>

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)

}

或者你可以使用 Promise/async/await

<小时/>

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))
}

或者，我们可以使用 then 来表示 Promise