Не удается реализовать отложенное обещание в jquery ajax

Question

Я изо всех сил пытаюсь реализовать отложенный, чтобы получить асинхронный ответ ajax.У меня есть эта настройка:

report.js

function getReport(ref)
{
   $.ajax({
        url: "report.php", 
        dataType: 'json',
        data: { 
            ref: ref,
        },
        success: function(result){
           return (result);
           }
         }
    });
}

index.html

<script>
function firstFunction() {
console.log ("start");
getReport(2, 'queue', 'hour', '2018-09-09', '2018-09-10', 'pageviews', 'page', 's1390_5bbb4639ff37');
};
var test = firstFunction();
alert(test);
</script>

В настоящее время я получаю"undefined" сразу же возвращается, потому что окно оповещения не ожидает запуска функции ajax.Используя некоторые учебные пособия онлайн, я попытался реализовать это следующим образом:

report.js

function getReport(ref)
{
   var deferred = $.Deferred();
   $.ajax({
        url: "report.php", 
        dataType: 'json',
        data: { 
            ref: ref,
        },
        success: function(result){
           deferred.resolve(result);
           }
         }
    });
  returned deferred.promise();
}

index.html

    <script>
    function firstFunction() {
    console.log ("start");
    getReport(2, 'queue', 'hour', '2018-09-09', '2018-09-10', 'pageviews', 'page', 's1390_5bbb4639ff37');
    };
$.when(getData()).done(function(value) {
    alert(value);
});

getData().then(function(value) {
    alert(value);
});
</script>

Я, очевидно, допустил несколько ошибок на пути, потому что я получаю ошибки ниже, и, похоже, я не могу их обойти:

Uncaught SyntaxError: Unexpected identifier
index2.html:12 start
index2.html:13 Uncaught ReferenceError: getReport is not defined
    at firstFunction (index2.html:13)
    at index2.html:16

Answer 1

Я думаю, что добавление deferred объекта в getReport не нужно, потому что $.ajax уже создает его для вас.Возможно, лучше изменить исходный код следующим образом:

function getReport(ref)
{
   return $.ajax({ // Return the deferred object here. It is returned by .ajax()
        url: "report.php", 
        dataType: 'json',
        data: { 
            ref: ref,
        } // Remove the callback here. 
          // You cannot call return in the way you're trying here. 
          // The context is different and outside of normal flow.
    });
}

, а затем в файле индекса:

<script>
function firstFunction() {
  console.log ("start");
  // You must return the returned value here as well, otherwise variable `test` is going to be undefined.
  return getReport(2, 'queue', 'hour', '2018-09-09', '2018-09-10', 'pageviews', 'page', 's1390_5bbb4639ff37');
};
var test = firstFunction(); // test is now a deferred object
test.done(function(data) {
  alert(data);
});
</script>