Область видимости переменных JavaScript?

Question

[Иван Трофимов]

Есть метод:

getData: function (id, url) {<br>
<br>
    var resultJSON;<br>
<br>
    //Настроили AJAX-запрос<br>
    $.ajax({<br>
        type: 'POST',<br>
        dataType: 'JSON',<br>
        url: url,<br>
        data: {<br>
            id: id<br>
        }<br>
    }).done(function (data) {<br>
<br>
        resultJSON = data;<br>
<br>
    }).fail(function (jqXHR, textStatus) {<br>
        $.error("Ошибка загрузки: " + textStatus);<br>
    });<br>
<br>
    return resultJSON;<br>
<br>
}<br>

Почему текущий метод возвращает undifined?

Хотя если вызвать console.log(resultJSON)<br> после строки

resultJSON = data;<br> тогда возвращает нормальный JSON, который пришёл с сервера.

Понимаю, что что-то не так с областью видимости переменных, но как сделать чтобы метод вернул мне значение data в случае успешного получения данных от скрипта?

Answer 1

[aretmy]

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

  // вызов метода
  obj.getData(id, url, function(data) {
      // здесь обработка данных
   });

// ...

getData: function (id, url, callback) {
    //Настроили AJAX-запрос
    $.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: url,
        data: {
            id: id
        }
    }).done(function (data) {
        callback && callback(data);
    }).fail(function (jqXHR, textStatus) {
        $.error("Ошибка загрузки: " + textStatus);
    });
}

Answer 2

[Михаил Крайнов]

$.ajax асинхронен.
Вы его сконфигурировали, повесили обработчики на коллбэки, отправили запрос. И вернули пустоту.
Через какое-то время пришли данные сервера, коллбэк отработал и в resultJSON что-то появилось.

Comments

[Иван Трофимов]

Точно. Теперь всё стало понятно. А то смотрел на код как на магию какую-то.

Answer 3

[Igogo2012]

Вам нужно переписать ваш код так что бы returnJSON был внутри .done(function(data){ ТУТ retrun data; })…
По тому что ваш return происходит раньше чем сервер возвращает данные, по скольку вы запрашиваете данные с сервера асинхронно.

Answer 4

[shcoderAlex]

Можно отключить асинхроность «async:false» и всё заработает как вы хотите, но всё замрёт пока не придёт ответ от сервера.

Вот добавил в ваш код

getData: function (id, url) {

    var resultJSON;

    //Настроили AJAX-запрос
    $.ajax({
        type: 'POST',
        async: false,
        dataType: 'JSON',
        url: url,
        data: {
            id: id
        }
    }).done(function (data) {

        resultJSON = data;

    }).fail(function (jqXHR, textStatus) {
        $.error("Ошибка загрузки: " + textStatus);
    });

    return resultJSON;

}

Comments

[Dolios]

Не нужно так делать без крайней необходимости. Неумение подсунуть в функцию получения данных коллбэк (как один из вариантов реализации, приведенный ниже) не оправдание для синхронных запросов.

[egorinsk]

зачем вы такому учите начинающих, он же возьмет и сделает так на боевом сайте.

Answer 5

[egorinsk]

> Почему текущий метод возвращает undifined?

Потому, что $.ajax (точнее, XmlHttpRequest) только лишь запускает отправку запроса и сразу же возвращает управление, она не ждет, пока он завершится. И return срабатывает раньше, чем вызовется функция onDone, потому там undefined. Логично же?

> Понимаю, что что-то не так с областью видимости переменных, но как сделать чтобы метод вернул мне значение data в случае успешного получения данных от скрипта?

Никак. Научитесь мыслить асинхронно: не «метод делает запрос и возвращает данные», а «метод отправляет запрос и когда-нибудь потом вызовет функцию onDone».