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

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

xmlhttprequest javascript

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 年前

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

推荐文章

Rachel Dockter · 如何从其他网站获取特定div内容

7 年前

Nevil Saul Blemuss · 我的想法是创建自己的js方法,我将传入三个参数(方法、url、数据)

7 年前

saunders07 · PHP到XMLHttpRequest SQL删除

7 年前

Shahrzad Nazemi · 如何发出javascript http请求

7 年前

Glafuski · 为什么readyState==0不起作用

7 年前

misha sachenko · XML HTTP请求无法从JS向我的PHP文件发送请求

7 年前

user3390812 · XMLHTTPRequest请求打开天气返回状态0

7 年前

AskaNor_29 · 未定义检测AJAX请求$\u服务器['HTTP\u X\u REQUESTED\u WITH']的操作

7 年前

CoqPwner · 如何设置XMLHttpRequest的响应

8 年前

user9334443 · 我无法使用put方法获取变量-xmlhttprequest-laravel

8 年前