Javascript 函数在分配正确的值之前不会等待分配响应

我在extjs.file上有一个xhr函数，它将值发送到rest服务，并期望得到响应。 我在点击事件btn上调用此函数。它第一次响应“未定义”，然后当我再次启动按钮时，它会以正确的值响应。我几乎可以肯定我的响应不是即时的，但是为什么函数不能等到它有了值，然后再将它赋给我的返回值，而不是发送给我未定义的值呢

var b;

function Transport(parameters, Page) {

    var http = new XMLHttpRequest();

    http.open("POST", "http://***.***.***.***/" + Page, true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", parameters.length);

    http.onreadystatechange = function() { //Call a function when the state   changes.
        if (http.readyState == 4 && http.status == 200) {

            b = http.response;
        }
    }
    http.send(parameters);
    return b;
}

页面上函数的调用

var transaction = Transport(parameters,"/mypage.php");
alert(transaction);

调用Transport（）发送请求时，

b

已经存在，并且其值

未定义。调用是异步的，因此会立即返回，而无需等待请求完成。请求仍在后台处理，在您第二次按下按钮时已完成。当它完成时，设置b，由第二次调用返回

如果您将代码更改为以下内容，行为将更像您所期望的：

function doSomethingWithMyData(data) {
    ...
}

function Transport(parameters, page) {
    var http = new XMLHttpRequest();

    http.open("POST", "http://***.***.***.***/" + page, true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", parameters.length);

    http.onreadystatechange = function() { //Call a function when the state   changes.
        function() {
            if(http.readyState == 4 && http.status == 200) {
                doSomethingWithMyData(http.reponse);
            }
        }
    }
    http.send(parameters);
}


调用Transport（）发送请求时，
b
已经存在，并且其值
未定义。调用是异步的，因此会立即返回，而无需等待请求完成。请求仍在后台处理，在您第二次按下按钮时已完成。当它完成时，设置b，由第二次调用返回

如果您将代码更改为以下内容，行为将更像您所期望的：

function doSomethingWithMyData(data) {
    ...
}

function Transport(parameters, page) {
    var http = new XMLHttpRequest();

    http.open("POST", "http://***.***.***.***/" + page, true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", parameters.length);

    http.onreadystatechange = function() { //Call a function when the state   changes.
        function() {
            if(http.readyState == 4 && http.status == 200) {
                doSomethingWithMyData(http.reponse);
            }
        }
    }
    http.send(parameters);
}


您正在尝试以异步模式使用httprequest。其中http.send（）立即返回。您可以尝试将代码的Asynch设置为False

var b;
function Transport(parameters,Page) { 
 var http = new XMLHttpRequest();
 http.open("POST", "http://***.***.***.***/"+Page, false);

  //Send the proper header information along with the request
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http.setRequestHeader("Content-length", parameters.length);
  http.send(parameters);
  b=http.response;
  return b;
 }

有关更多信息，请参阅。
您正试图在异步模式下使用httprequest。其中http.send（）立即返回。您可以尝试将代码的Asynch设置为False

var b;
function Transport(parameters,Page) { 
 var http = new XMLHttpRequest();
 http.open("POST", "http://***.***.***.***/"+Page, false);

  //Send the proper header information along with the request
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http.setRequestHeader("Content-length", parameters.length);
  http.send(parameters);
  b=http.response;
  return b;
 }

有关更多信息，请参阅。
您正在发出异步请求，但试图同步处理结果。相反，使用回调

function transport(parameters, Page, callback) { // not a constructor, cammel case
    var xhr = new XMLHttpRequest();

    xhr.open("POST", "http://***.***.***.***/" + Page);

    //Send the proper header information along with the request
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // don't set content-length, you'll get a warning

    xhr.addEventListener('load', function () {
        callback(this.response, this);
    });
    xhr.send(parameters);
    return xhr;
}

然后


在ES6中，我们可以将其作为

然后

您正在发出异步请求，但试图同步处理结果。相反，使用回调

function transport(parameters, Page, callback) { // not a constructor, cammel case
    var xhr = new XMLHttpRequest();

    xhr.open("POST", "http://***.***.***.***/" + Page);

    //Send the proper header information along with the request
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // don't set content-length, you'll get a warning

    xhr.addEventListener('load', function () {
        callback(this.response, this);
    });
    xhr.send(parameters);
    return xhr;
}

然后


在ES6中，我们可以将其作为

然后

谢谢，但这并不能真正解决我的问题，因为有一个实例，我需要操作返回的数据，而不仅仅是将其显示为警报。我希望将我的函数与处理数据的其余函数分开。@Alfred Alfizo Mosima您的示例所做的就是将数据放入警报中。我将添加更多内容，以便您可以看到如何更改它，但这并不能真正解决我的问题，因为有一个实例，我需要处理返回的数据，而不仅仅是将其显示为警报。我希望将我的函数与处理数据的其余函数分开。@Alfred Alfizo Mosima您的示例所做的就是将数据放入警报中。我将添加更多内容，以便您可以查看如何更改它
fetch(Page, parameters, 'text').then(alert);