Как получить доступ к возвращаемому значению этого запроса AJAX?

Question

У меня есть этот код

var stats =  {
    GetMetaData : function() {
        var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/metadata/'+storage.get('apikey');
        $.ajax({
            url: url,
            success: function(data) {
                return data;
            }
        });
        return 'abc';
    }
}

Я вызываю функцию, используя stats.GetMetaData();

Я ожидаю, что возвращаемое значение будет переменной data из запроса ajax. Но вместо этого это строка 'abc', почему это так?

Как я могу вернуть переменную data?

Я пытался сделать return $.ajax({, но это просто вернуть код функции.

Answer 1

Поскольку запросы jquery ajax являются асинхронными по умолчанию.Вы можете сделать запрос синхронным, используя опцию async: false или (лучше) использовать функцию обратного вызова.
Также, как отмечает CharlesLeaf , использование синхронного запроса будет блокировать браузер до получения ответа.

Об общей концепции асинхронных операций.
Я бы связал некоторые пояснения с сайта jquery, но, похоже, сейчас нет.

Answer 2

AJAX-вызов является асинхронным, что означает, что вызов возвращается немедленно, и функция обратного вызова вызывается при поступлении данных.Поскольку ваш метод GetMetaData уже завершен, значение, которое возвращает обратный вызов, игнорируется.

Вы можете сделать вызов синхронным, но по возможности этого следует избегать, так как он останавливает браузер до получения ответа.Обычным способом является использование функции обратного вызова.

Добавление обратного вызова к методу:

var stats =  {
  GetMetaData : function(callback) {
    var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/metadata/'+storage.get('apikey');
    $.ajax({
        url: url,
        success: callback
    });
  }
}

Вызов его с использованием:

stats.GetMetaData(function(data){
  // do something with the data
});

Answer 3

var stats =  {
    GetMetaData : function() {
        var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/metadata/'+storage.get('apikey');
        var result;
        $.ajax({
            url: url,
            async: false,
            success: function(data) {
                result = data;
            }
        });

        return result;
    }
}

Answer 4

Вы не сможете обработать возвращаемое значение, которое вы возвращаете из обратного вызова success, по следующим причинам:

• Прежде всего, ваше заявление return dataвозвращается из обратного вызова success, а не из внешней функции GetMetaData.

• Но кроме того, к тому времени, когда ваш обратный вызов success будет вызван, функция GetMetaData уже будет возвращена.Помните, что $.ajax() по умолчанию является асинхронным (неблокирующим).Асинхронный A в AJAX .

Вы должны обработать ответ data в обратном вызове напрямую или вызвать вспомогательную функцию дляобработать ответ.Поскольку в JavaScript функции являются первоклассными гражданами, вы можете передать эту «вспомогательную функцию» в качестве аргумента вашей GetMetaData функции, как предложено @ Guffa в другом ответе .

Answer 5

В вашей функции успеха вызовите имеющуюся у вас функцию javascript, которая будет обрабатывать данные, т. Е .:

        success: function(data) {
            DoSomthingWithThe(data);
        }

        ...

    function DoSomethingWithThe(data) {
       // Do something useful
    }

Ваша проблема в том, что вызов AJAX является асинхронным, поэтому «success» не вызывается до тех пор, пока не произойдет некоторое время после выхода из функции GetMetaData, когда удаленный сервер вернет данные. Вы можете выбрать синхронный режим и дождаться ответа, но гораздо лучше использовать функцию обратного вызова, как указано выше.

Answer 6

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