Невозможно вернуть значение объекта из функции JavaScript

Question

У меня есть функция, которая пытается получить возвращаемое значение из вызывающей функции следующим образом:

var select = xhrRetrieve(projID);

Вот пример функции xhrRetrieve:

function xhrRetrieve(projID) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                var obj = $.parseJSON(xhr.responseText);

                return obj.select.toString();
            }
        }
    }

    var url = "ajax.cgi";
    var data = "action=retrieve-opp&proj-id=" + projID;

    xhr.open("POST",url);
    xhr.setRequestHeader("Content-Type","application/x-www-urlencoded");
    xhr.send(data);

}

Я использую jQuery в сочетании с прямым JavaScript. Всякий раз, когда я пытаюсь получить значение obj.select, используя:

var select = xhrRetrieve(projID);

Выбор всегда возвращается undefined.

Что я делаю не так?

Answer 1

Поскольку запрос является асинхронным, функция вернется до того, как ваш код в onreadestatechange сработает.Вы можете переключиться в синхронный режим и получить значение до того, как функция возвратит:

function xhrRetrieve(projID) {
    var returnVal;
    var xhr = new XMLHttpRequest();

    var url = "ajax.cgi";
    var data = "action=retrieve-opp&proj-id=" + projID;

    //3rd param is false to switch to synchronous
    xhr.open("POST",url, false);
    xhr.setRequestHeader("Content-Type","application/x-www-urlencoded");
    xhr.send(data);
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {
            var obj = $.parseJSON(xhr.responseText);
            return obj.select.toString();
        }
    }
}

Answer 2

1. Функция ничего не возвращает
2. В тот момент, когда вы вызываете вашу функцию, (100%) возвращаемое значение присваивается select.В тот же момент ваш запрос ajax запускается, что требует времени для выполнения;функция обратного вызова не будет вызываться до тех пор, пока запрос ajax не будет выполнен (и успешно выполнен).

Это должно работать:

function doStuffWithTheAjaxResponse(select) {
   // do stuff
}

function xhrRetrieve(projID) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                var obj = $.parseJSON(xhr.responseText);

                doStuffWithTheAjaxResponse(obj.select.toString());
            }
        }
    }

    var url = "ajax.cgi";
    var data = "action=retrieve-opp&proj-id=" + projID;

    xhr.open("POST",url);
    xhr.setRequestHeader("Content-Type","application/x-www-urlencoded");
    xhr.send(data);

}

Answer 3

У вас там две функции.Внутренняя функция возвращает значение, но не внешнее.Внутренняя функция является обработчиком событий, поэтому возвращаемое значение никуда не денется.Ваш XMLHttpRequest является асинхронным, поэтому вы не сразу получите возвращаемое значение.См. Этот пост для более подробного объяснения: параметр "true" в методе xmlHttpRequest .open ()

Answer 4

Функция xhrRetrieve не имеет возвращаемого значения.Что вы ожидаете, что произойдет?