javascript - 如何等待另一个回调的ajax回调结果？

Question

我有以下方法:

 self.getOrAddCache = function (key, objectFactory) {
        var data = self.getFromCache(key);
        if (!data) {
            data = objectFactory();
            if (data && data != null)
                self.addToCache(key, data);
        }
        return data;
    };

我是这样使用的:

function getCities()
{
    var cities = getOrAddCache(CacheKeys.Cities, function() {
        var cityArray = new Array();
        // get city informations from service 
        $.ajax({
               type: "GET",
               async: true,
               url: "service/cities",
               success: function (response) {
                    $.each(response, function(index, value) {
                        cityArray.push({
                            name: value.name,
                            id: value.id
                        });
                    });
               }
           });

        if (cityArray.length > 0)
            return cityArray;
        else {
            return null;
        }
    });

    return cities;
}

getCities 函数总是返回 null 因为 getCities 不等待完成异步 ajax 请求。

我该如何解决这个问题？ (请求必须是异步的)

Answer 1

最好的解决方案是使用 Deferred 对象。由于您要求 AJAX 调用是异步的，因此您应该让 getCities 函数返回一个 promise ，以便在将来的某个时间点返回该数据。

不是将原始数据存储在缓存中，而是存储这些 promise 。

如果您请求一个已经解决的 promise ，它将立即完成。如果已经有缓存对象的待处理请求，异步 AJAX 调用将启动，所有等待该 promise 的未完成回调将按顺序启动。

像这样的东西应该工作，虽然这当然是未经测试的，E&OE 等等。

self.getCached = function(key, objectFactory) {
    var def = self.getCache(key);
    if (!def) {
        def = objectFactory.call(self);
        self.addToCache(key, def);
    }
    return def;
}    

function getCities() {
    return getCached(CacheKeys.Cities, function() {
        return $.ajax({
            type: 'GET',
            url: 'service/cities'
        }).pipe(function(response) {
            return $.map(response, function(value) {
                 return { name: value.name, id: value.id };
            });
        });
    });
}

请注意使用 .pipe 将 AJAX 响应后处理为所需格式，结果是另一个延迟对象，实际上是后者存储在缓存中。

现在的用法是:

getCities().done(function(cities) {
    // use the cities array
});