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

当您提供设置 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 as well as using promises:

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

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

JS: Loaded json undefined, even though it is not

javascript

xmlhttprequest