Question

我的dataHelper.js文件的内容：

define(["dojo/_base/declare", "dojo/dom", "dojo/_base/xhr", "dojo/json"], 
function(declare, dom, xhr, json){
    return {
        getJSON: function(){
            xhr.get({ 
                url: "../../cpuusage.json",
                handleAs: "json",
                load: function(jsonData){
                    return jsonData;
                },
                error: function() {
                }
            });
        }
    };      
});

我正在尝试从我的index.html运行它，如下所示：

  var chartData = dataHelper.getJSON();

我想我有几个问题。首先，我不确定我的模块和getJSON函数是否正确定义。其次我在我的控制台上出错：

TypeError: this.source is undefined
[Break On This Error]   
= [],

dojo.js (line 362)
SyntaxError: missing : after property id
},

dojo.js (line 330)
SyntaxError: missing : after property id
},

dojo.js (line 330)
SyntaxError: missing : after property id
},

我想首先实现的是将json数据加载到 chartData 变量中。非常感谢。

Answer 1

我看到的第一个问题是你将异步进程视为同步进程。 xhr.get在发送到服务器的请求后立即返回，在收到响应之前不会阻塞。

首先，我会在模块定义中添加console.log，以确保正确加载dataHelper模块。

define(["dojo/_base/xhr"], 
function(xhr){
    console.log('dataHelper.js loaded');
    return {
    //
    };
});

另请注意，上面您没有使用除dojo/_base/xhr之外的任何基本dojo模块，因此不必包含它们（除非它们在此代码段之外使用）。

您需要更新代码以异步处理此调用。为此，您可以利用xhr.get方法返回Deferred对象这一事实。这个类使得以一致的方式处理异步非常容易。

为此，请更新dataHelper模块以返回xhr调用的结果：

define(["dojo/_base/xhr"], function(xhr){
    return {
        getJSON: function(){
            //this returns a Deferred object, what to do on load and error is then handled by the invoker
            return xhr.get({ 
                url: "../../cpuusage.json",
                handleAs: "json"
            });
        }
    };      
});

然后，在使用这个模块时：

//replace dataHelper with whatever it's path is
require(['dataHelper'],function(dataHelper){
    var deferred = dataHelper.getJSON();
    deferred.then(function(data){
        //this function is invoked once the data has been fully loaded
    }, function(error){
       //this function is invoked  if an error occurs while loading the data (in case of a server error response or if the response isn't in the format you specified)
    });
});

Answer 2

这是我的建议：

您的dataHelper.js文件：

define("dataHelper", ["dojo/_base/declare", "dojo/dom", "dojo/_base/xhr"], 
function(declare, dom, xhr){
    return declare("dataHelper", [], {
        getJSON: function(){
            return xhr.get({ 
                url: "../../cpuusage.json",
                handleAs: "json"
            });
        });
    };      
});

你的调用：

require(["dataHelper"], function(dataHelper) {

    var chartData;
    dataHelper.getJSON().then(function(jsonData) {
        chartData = jsonData;
        //Continue doing stuff with chartData in here, not outside
    });

});

从Dojo中的模块调用JSON函数

2 个答案: