从 XMLHttpRequest 函数返回 JSON

Question

您好，我一直在努力解决从 XMLHttpRequest 函数返回数据的问题。我尝试了许多不同的方法，但是当我尝试从函数外部将数据输出到控制台时，我唯一能得到的就是我总是得到“未定义”。它只有在我从函数本身内部执行时才有效。

<script>
var object;

function loadJSON(path, success, error) {
    var xhr = new XMLHttpRequest();
    var obj1;
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if (success)
                success(JSON.parse(xhr.responseText));
                //console.log(data); works here!
            } else {
                if (error)
                error(xhr);
            }
        }
    };
    xhr.open("GET", path, true);
    xhr.send();
}


object = loadJSON('jconfig.json',
function (data) { console.log(data); return($data);/*works here! but does not return!*/ },
function (xhr) { console.error(xhr); }
);

console.log(object);//does not work here
</script>

我知道这是一个非常简单的问题，但我已经被这个问题困扰了一个多小时，而且其他类似问题的答案似乎无法让我克服这个障碍。非常感谢任何帮助！

编辑：我用一些建议更新了代码，但我仍然无法让 ti 工作。任何建议让上面的代码最终返回我可以在函数之外使用的东西。

Answer 1

在调用 laodJSON() 函数之后执行 console.log(object) 行，直到那时 JSON 对象才被加载。

这与回调和异步函数有关。您的 loadJSON() 只有在从服务器获得响应时才能真正加载 JSON。

相反，如果要在 loadJSON() 函数之外调用 JSON 对象，则需要使用回调函数。像这样的：

<script>
var object;

function loadJSON(path, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                // Here the callback gets implemented
                object = JSON.parse(xhr.responseText);
                callback();
            } else {

            }
        }
    };

    xhr.open("GET", path, true);
    xhr.send();
    return xhr.onreadystatechange();
}

loadJSON('jconfig.json', function printJSONObject(){
          console.log(object);
    });

// this will not work unless you get the response
console.log(object);

</script>

更新：通过使用回调从异步函数中“返回”一个值是没有意义的，因为下一行代码将立即执行而无需等待响应。

相反，如果您想在发送 XHR 请求的函数之外使用该对象，请在回调函数中实现所有内容。