JS：加载的 json 未定义，即使它不是

Question

我正在尝试通过 json 加载一个数组，这个函数主要是从 W3 学校偷来的：

function load_json_data(path, callback) {

  var httpRequest = new XMLHttpRequest();

  httpRequest.onreadystatechange = function() {

    if (httpRequest.readyState === 4 && httpRequest.status === 200) {

      var data = JSON.parse(httpRequest.responseText);

      if (callback) callback(data);

    }

  };

  httpRequest.open('GET', path);

  httpRequest.send();

}

我有第二个函数应该绘制数据图表，但让我们假设它只是打印数组。（它也不会绘制它们的图表，因此这不仅仅是显示错误）：

function create_graph(data) {

    console.log(data);

}

现在，在任何功能之外，我正在这样做：

var data;

load_json_data(

  "./test.json",

  function(return_data) {

    data = return_data;

  }

);

console.log("Loaded Data: " + data)

create_graph(data);

所以我加载“./test.json”并将其传递给函数。不幸的是，输出显示数据未定义，但是当我手动访问变量时，我得到了正确的输出：

Loaded Data: undefined

Received Data: undefined

> data

(6) [0.6, 0.55, 0.45, 0.4, 0.7, 0.66]

我来自 c 和 python，所以我假设解释器对我隐藏了一些东西。为什么在加载函数运行后变量未定义，但在访问它时已定义？

Answer 1

当你提供一个 set 的回调时data，你基本上是在告诉 JS“发出 HTTP 请求，data完成后设置变量，但同时继续运行后面的代码。” 如果要data设置，则必须将使用的代码data移至回调中：var data;load_json_data(  "./test.json",  function(return_data) {    data = return_data;    console.log("Loaded Data: " + data)    create_graph(data);  });您还应该考虑迁移到fetch API以及使用Promise：function load_json_data(path, callback) {  return fetch(path).then(res => res.json());}load_json_data("./test.json", function(data) {  console.log("Loaded data: " + data);  create_graph(data);});