即使数据肯定返回，将ajax fetch函数分配给变量也会返回未定义？答案

【问题标题】：Assigning an ajax fetch function to a variable returns undefined even though data definitely returns?即使数据肯定返回，将ajax fetch函数分配给变量也会返回未定义？
【发布时间】：2015-08-17 13:24:09
【问题描述】：

我有一个数据获取函数getAvailableDates，我通过分配一个变量AVAILABLE_DATES 来调用它，在done 回调中我注销响应并且我的数据在那里但返回数据并注销变量返回@ 987654324@。谁能解释我可能在哪里出错？

define([
    'jquery'
], function (
    $
) {

    "use strict";

    function getAvailableDates() {
        console.log('Running getAvailableDates');

        var requestAvailableDates = $.ajax({
            type: "GET",
            url: 'api/dcgdates',
            data: JSON.stringify(requestAvailableDates),
            dataType: "json",
            contentType: "application/json"
        });

        requestAvailableDates.done(function(data) {
            console.log('getAvailableDates success', data);
            return data;
        });
    }

    return {

        DATE_FORMAT: "dd M yy",
        AVAILABLE_DATES: getAvailableDates()
    };
});

【问题讨论】：

因为您的日志在获取数据之前执行。
哦，我怎么能推迟这个？
你需要使用回调......你不能通过 AJAX 调用 return
你能给我举个例子吗？

标签： javascript jquery ajax

【解决方案1】：

使用 $.ajax 返回的deferred，当你使用它来记录数据时，它是可链接的，你可以这样写：

var request = $.ajax(...);
// This will return the deferred object. And you can keep call `.done` on it to chain the callbacks.
return request.done(...).done(...);

.done 链接的所有回调都将从您的 ajax 请求中接收相同的数据。

define(['jquery'], function($) {
    "use strict";
    function getAvailableDates() {
        console.log('Running getAvailableDates');

        var requestAvailableDates = $.ajax({
            type: "GET",
            url: 'api/dcgdates',
            data: JSON.stringify(requestAvailableDates),
            dataType: "json",
            contentType: "application/json"
        });

        // Return a deferred object.
        return requestAvailableDates.done(function(data) {
            console.log('getAvailableDates success', data);
            return data;
        });
    }

    return {
        DATE_FORMAT: "dd M yy",
        deferredObj: getAvailableDates()
    };
});

然后就可以拿到对象并使用了：

returnObj.deferredObj.done(function(data) {
   // do something......
});

获取它的价值。

下面是一个 sn-p 来展示如何使用它。

var test = function() {
  var dfd = $.Deferred();  
  
  setTimeout(function() {
    dfd.resolve(1);
  }, 3000);
  
  // Each .done returns the deferred object, which can be chained to more callbacks.
  // And they'll execute in the order you chained them.
  return dfd
    .done(function(val) {
        console.log(val);
     })
    .done(function(val) {
        console.log('another ' + val);
     });
  

};

var deferred = test();

// The return deferred object can keep chaining to get the value.
// You can write your logic here to handle the data when deferred resolved.
deferred.done(function(val) {
  console.log('I got the same value: ' + val);
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：