Question

我尝试使用AJAX（通过jQuery）从API返回一些JSON，然后将该JSON作为字符串存储在localStorage中。每当函数运行时，我希望它检查localStorage的密钥，并返回该值（如果存在）。如果它不存在，那么它应该联系对象的API，将其保存到localStorage，然后返回它。

我遇到的问题是：函数NEVER第一次返回JSON对象（当它没有存储在localStorage中时）。将它保存到localStorage没有问题，它总是从localStorage中提取它就好了，但即使在上一行中使用返回的对象之后，该函数也不会返回它。控制台只是说＆＃34; undefined＆＃34;。

我正在使用的代码如下（由于API是私有的，因此略有编辑）：

window.get_company = function() {
    var full = window.location.host;
    var parts = full.split('.');
    var subdomain = parts[0];

    if ( localStorage.getItem("company_" + subdomain) === null ) {
        $.getJSON("https://api.testingapp.com/subdomains?name=" + subdomain).then( function(data) {
            localStorage.setItem("company_" + subdomain, JSON.stringify(data));
            return JSON.stringify(data);
        });
    } else {
        return localStorage.getItem("company_" + subdomain);
    }
}

非常感谢你的帮助！

Answer 1

您对$.getJSON的呼叫是异步的。 return JSON.stringify(data)直到原来的get_company函数返回后才会发生。解决这个问题的一种方法是使用promises或回调。

例如，使用jQuery的Deferred对象（promises）：

window.get_company = function() {
    var deferred = $.Deferred();
    var full = window.location.host;
    var parts = full.split('.');
    var subdomain = parts[0];

    if ( localStorage.getItem("company_" + subdomain) === null ) {
        $.getJSON("https://api.testingapp.com/subdomains?name=" + subdomain).then(function(data) {
            localStorage.setItem("company_" + subdomain, JSON.stringify(data));
            return deferred.resolve(JSON.stringify(data));
        });
    } else {
        deferred.resolve(localStorage.getItem("company_" + subdomain));
    }

    return deferred;
}

// to use:
window.get_company().then(function(result) {
  // do something with the result
})

Answer 2

在以下链接中，您有一些解决方案/解决方法：

（检查第二个答案，而不是接受的答案）

Return value for function containing jQuery $.post() function

因此，虽然技术上可以使调用同步并返回值，但不建议这样做。你的方法应该变成异步而不是返回一个值，它会在完成时调用一个回调，所以你有：

window.get_company = function(onSuccess) {
    var full = window.location.host;
    var parts = full.split('.');
    var subdomain = parts[0];

    if ( localStorage.getItem("company_" + subdomain) === null ) {
        $.getJSON("https://api.testingapp.com/subdomains?name=" + subdomain).then( function(data) {
            localStorage.setItem("company_" + subdomain, JSON.stringify(data));
            onSuccess(JSON.stringify(data));
        });
    } else {
        onSuccess(localStorage.getItem("company_" + subdomain));
    }
}

然后，而不是像这样打电话：

company = window.get_company(); //This fails

你会打电话给

//This works
window.get_company(function(returnValue){
   company = returnValue;
});

这是一种方式，还有其他方式，比如回复承诺

来自玻利维亚拉巴斯的欢呼声

使用AJAX返回JSON对象

2 个答案: