代码之家  ›  专栏  ›  技术社区  ›  David K.

JS:加载的json未定义,即使它不是

  •  0
  • David K.  · 技术社区  · 5 年前

    我正试图通过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);
    

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

    Loaded Data: undefined
    Received Data: undefined
    > data
    (6) [0.6, 0.55, 0.45, 0.4, 0.7, 0.66]
    

    我来自c和python,所以我假设解释器对我隐瞒了什么。为什么在load函数运行后变量没有定义,但是在我访问它时定义了它?

    1 回复  |  直到 5 年前
        1
  •  0
  •   Aplet123    5 年前

    当您提供设置 data ,基本上是告诉JS“发出HTTP请求,设置 变量,但同时继续运行后面的代码 数据 要进行设置,必须移动使用 在回调中:

    var data;
    load_json_data(
      "./test.json",
      function(return_data) {
        data = return_data;
        console.log("Loaded Data: " + data)
        create_graph(data);
      }
    );
    

    您还应该考虑迁移到 fetch API 以及使用 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);
    });