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: undefinedReceived 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);

});