如何在异步xhr请求中返回值?

时间:2017-03-02 23:01:23

标签: javascript asynchronous xmlhttprequest

如何将loadFile.responseText作为返回值返回xhr()函数,其中loadFile.Open设置为true(async)...当我将请求设置为同步(false)时,返回值。我确实理解为什么会发生这种情况,但我想知道是否有办法通过异步设置来实现这一目标。

loadFile.open("GET", url, true); // no response

整个功能:

function xhr(url, async){

    var data = '';

    var loadFile = new XMLHttpRequest();

        loadFile.overrideMimeType("application/json");

        loadFile.open("GET", url, false); // when true, no value is returned (of course)

        loadFile.onreadystatechange = function() {

            if (loadFile.readyState === 4 && loadFile.status == "200")
            {
                data = JSON.parse( loadFile.responseText );

                return data;
            }
        }

        loadFile.send(null);

    return loadFile.onreadystatechange();
}

我一直在寻找答案,发现这个How do I return the response from an asynchronous call?而且不是重复。

如果需要,我不介意完全改变方向。你能帮助我找一个实际的基本例子或者一个可靠的建议来实现这个目标吗?

1 个答案:

答案 0 :(得分:1)

我将回答这个问题,然后将其作为副本关闭。这个答案纯粹是对您的SPECIFIC问题的澄清。真正的答案是阅读并理解副本。

我将在这里复制并粘贴重复答案中的相关部分:

 var result = foo();
 // Code that depends on 'result'
     

变为

 foo(function(result) {
     // Code that depends on 'result'
 });

所以你的代码应该重组为:

function xhr(url, callback){

    var data = '';

    var loadFile = new XMLHttpRequest();

        loadFile.overrideMimeType("application/json");

        loadFile.open("GET", url, false); // when true, no value is returned (of course)

        loadFile.onreadystatechange = function() {

            if (loadFile.readyState === 4 && loadFile.status == "200")
            {
                data = JSON.parse( loadFile.responseText );

                callback(data); //// NOTE: this is how you return the value
            }
        }

        loadFile.send(null);

    loadFile.onreadystatechange();
}

如何使用返回的结果:

xhr(some_url, function (result) {
    // use result here

    // NO, it's not possible to get result outside this function
    // If you really want you can pass it further to other functions:

    do_something_with(result);

    // but you can NEVER return it
});

基本上,您需要重新构建代码并习惯回调。

有更好的方法可以进行回复,例如promises和更新版本的js async / await(返回promises),但它们仍然是所有回调。