Javascript 回拨不回拨

为了显示仪表板小部件，我正在尝试实现从API调用（改编）检索的JSON数据的Javascript缓存。这个想法是：

加载Google图表脚本

加载后，每个仪表板小部件调用各自的API以获取JSON数据

缓存来自每个API调用的JSON数据，以防两个（或更多）小部件使用相同的URL，并检索相同的数据

使用缓存的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>

var cache={}；
函数LoadOrCacheApiData（url，回调）{
如果（！缓存[url]）{
cache[url]=$.get（url.promise（）；
}
缓存[url]。完成（回调）；
}
函数DisplayData（）{
LoadOrCacheApiData（'/api/AverageLevel？TopN=5'，'RenderWidget0'）；
LoadOrCacheApiData（'/api/ExpireyCountDays？DaysHead=7'，'RenderWidget1'）；
LoadOrCacheApiData（'/api/LoginCount？DaysPrevious=7'，'RenderWidget2'）；
}
load（'current'，{packages:['corechart'，'table']}）；
google.charts.setOnLoadCallback（DisplayData）；
函数RenderWidget0（）{
var d=JSON.parse（cache['/api/AverageLevel？TopN=5']）；
警戒（d）；
//要执行的操作：将内容渲染到div
}
函数RenderWidget1（）{
var d=JSON.parse（缓存['/api/expirycountdays？dayshead=7']）；
警戒（d）；
//要执行的操作：将内容渲染到div
}
函数RenderWidget2（）{
var d=JSON.parse（缓存['/api/LoginCount？DaysPrevious=7']）；
警戒（d）；
//要执行的操作：将内容渲染到div
}

---

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

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

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

我建议您使用从回调的

data

参数获取返回数据的模式，而不是使用缓存对象（有关详细信息，请参阅文档）。另外，如果在调用

$.get

时提供了

数据类型
“json”
，那么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
}

我还可以确定，您实际上需要在自己的代码中进行缓存。如果这是客户机代码，所有现代浏览器和大多数其他用户代理都有自己的本地缓存，可以为您处理此问题。
您将字符串作为回调函数传递。谢谢。替换缓存[url]行导致请求此url:
/Dashboards/[object%20Object]
。另外，您能否提供一个示例，说明调用RenderWidget0，传递新的参数值，如何证明它是一个JQuery错误。我将其替换为$.ajax类型：“GET”，效果很好。谢谢。我用了一个与
.get
一起使用的版本更新了答案。谢谢