Question

我尝试实现从API调用（已调整from here）检索的JSON数据的Javascript缓存，以显示仪表板小部件。这个想法是这样的：

加载Google Chart脚本
加载后，每个仪表板小部件都会调用相应的API来获取JSON数据
从两个API调用缓存JSON数据，以防两个（或更多）窗口小部件使用相同的URL，并检索相同的数据
使用缓存的JSON数据呈现每个小部件的Google图表

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

<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的文档）。另外，如果您在dataType的调用中提供"json" $.get，那么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
}

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

回调没有回电

1 个答案: