javascript - 回调不回调

Question

我正在尝试实现从 API 调用检索的 JSON 数据的 Javascript 缓存(改编 from here )，以便显示仪表板小部件。想法是这样的:

1. 加载 Google 图表脚本
2. 加载后，每个仪表板小部件都会调用相应的 API 来获取 JSON 数据
3. 缓存每个 API 调用的 JSON 数据，以防两个(或更多)小部件使用相同的 URL，并检索相同的数据
4. 使用缓存的 JSON 数据渲染每个小部件的 Google 图表

这是我所知道的，但是我的 RenderWidgetN()函数正在执行。使用 Firebug 时，我可以看到调用是对 /api/... 进行的。 URL，并且返回了数据，但我无法访问它。

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var cache = {};
function LoadOrCacheApiData(url, callback) {
    if (!cache[url]) {
        cache[url] = $.get(url).promise();
    }
    cache[url].done(callback);
}

function DisplayData() {
    LoadOrCacheApiData('/api/AverageLevel?TopN=5', 'RenderWidget0');
    LoadOrCacheApiData('/api/ExpiryCountNDays?DaysAhead=7', 'RenderWidget1');
    LoadOrCacheApiData('/api/LoginCount?DaysPrevious=7', 'RenderWidget2');
}

google.charts.load('current', { packages: ['corechart', 'table'] });
google.charts.setOnLoadCallback(DisplayData);


function RenderWidget0() {
    var d = JSON.parse(cache['/api/AverageLevel?TopN=5']);
    alert(d);
    // to do: render content to div
}

function RenderWidget1() {
    var d = JSON.parse(cache['/api/ExpiryCountNDays?DaysAhead=7']);
    alert(d);
    // to do: render content to div
}

function RenderWidget2() {
    var d = JSON.parse(cache['/api/LoginCount?DaysPrevious=7']);
    alert(d);
    // to do: render content to div
}
</script>

我以前没有使用过回调或缓存，所以可能有很多更好的方法来实现这一点。如有任何建议/帮助，我们将不胜感激。我很高兴这段代码可以被压缩，但只是想让它在开始之前工作。

Answer 1

我认为你的回调应该是函数本身，而不是函数的字符串名称:

function DisplayData() {
  LoadOrCacheApiData('/api/AverageLevel?TopN=5', RenderWidget0);
  LoadOrCacheApiData('/api/ExpiryCountNDays?DaysAhead=7', RenderWidget1);
  LoadOrCacheApiData('/api/LoginCount?DaysPrevious=7', RenderWidget2);
}

我建议您使用从回调的 data 参数获取返回数据的模式，而不是使用缓存对象(请参阅 $.ajax 的文档)。此外，如果您在调用 $.get 时提供 "json" 的 dataType，那么 JQuery 将为您解析结果。例如:

function LoadOrCacheApiData(url, callback) {
    if (!cache[url]) {
        cache[url] = $.get(url, 'json').promise();
    }
    cache[url].done(callback);
}

// ...

function RenderWidget0(data, textStatus, jqXHR) {
  // no need for `var d = JSON.parse(data);`
  // since JQuery will parse for you

  alert(data);

  // to do: render content to div
}

我还确定您确实需要在自己的代码中进行缓存。如果这是客户端代码，则所有现代浏览器和大多数其他用户代理都有自己的本地缓存来为您处理此问题。