javascript - 使用 Ext.Ajax.request 使 ExtJS 单例返回对象

Question

嗯，我对 javascript 很陌生，当然，我对 extJS 也很陌生，它是一个 Sencha JS 框架。我想做的事情我认为很简单，但我对js了解不多。

这是我提供的js文件:

Ext.define('app.util.UserWGroupInfo', {
    alternateClassName: ['UserInfo', 'WGroupInfo'],
    singleton: true,

    /**
     * Default information to be shown / displayed
     */
    statics: {
        userData: {
            'username':                 'User Name',
            'phoneNumber':              'Phone',
            'firstName':                'First Name',
            'lastName':                 'Last Name',
            'emailAddress':             'Email',
            'address.addressLine1':     'Address',
            'address.city':             'City',
            'address.stateOrProv':      'State'
        },
        wGroupData: {
            'name':                     'Name',
            'type':                     'Type',
            'description':              'Description',
            'phoneNumber':              'Phone',
            'poc':                      'POC'
        }
    },

    /**
     * Holder for the data to display
     * @type {Object}
     */
    dataToDisplay: {

    },

    /**
     * display a popup on no data retrieved
     * @type {Boolean} [true]
     */
    displayMsg: true,

    /**
     * Gets data of an user from the server
     * 
     * @param {String} userInfo, consider passing "usid:name"
     * @param {Boolean} double set true to check Like User&WGroup
     */
    getUserInfo: function(userInfo, displayMsg) {

        if (Ext.isEmpty(userInfo)) {
            return;
        }

        userInfo = userInfo.split(':');
        var user = userInfo[0] + ':' + + userInfo[1];

        //Note: to retrieve tooltip, set defaults data
        this.dataToDisplay = this.statics().userData;
        this.typeSearch = "User";

        if (displayMsg) {
            this.displayMsg = displayMsg;
        }

        this.getSysAdminObj('users', user);
    },

    /**
     * Gets data of a workgroup from the server
     * 
     * @param {String} wGroupInfo, consider passing "wgid:name"
     * @param {Boolean} double set true to check Like User&WGroup
     */
    getWGroupInfo: function(wGroupInfo, displayMsg) {

        if (Ext.isEmpty(wGroupInfo)) {
            return;
        }

        wGroupInfo = wGroupInfo.split(':');
        var wGroup = wGroupInfo[0] + ':' + wGroupInfo[1];

        //Note: to retrieve tooltip, set default data
        this.dataToDisplay = this.statics().wGroupData;
        this.typeSearch = "Work Group";

        if (displayMsg) {
            this.displayMsg = displayMsg;
        }

        this.getSysAdminObj('workgroups', wGroup);
    },

    getDataInfo: function() {
        return this.dataInfo;
    },

    /**
     * Retrieve a SysAdmin object to perform a connection to the server side.
     * 
     * @param {String} type. Consider as possible values: "users" or "workgroups"
     * @param {String} info
     */    
    getSysAdminObj: function(type, info) {
        var me = this;

        Ext.Ajax.request ({
            url:        '../rest/sysadmin/' + type + '/' + info,
            method:     'GET',
            scope:      me,
            async:      false,
            callback:   me.storeInfo
        });
    },

    /**
     * Map information retrieved to the dataInfo object.
     * 
     * Before storing the data, it is necessary to check if the search should be executed as user or workgroup.
     */
    storeInfo: function(o, s, r) {
        if ( !s ) {
            if (this.displayMsg) {
                Logger.notify('User Info Loading', 'Failed to load extra user info');
            }
            this.errorResponse = true;
            return;
        };

        this.errorResponse = false;
        var obtainedData = XmlConverter.unmarshal(r);
        this.dataInfo = obtainedData;
    }

});

我已经获得了这个类，它是一个单例，它的作用是什么？它根据对 REST 服务 (Java) 的调用检索用户信息和工作组信息，我使用“SysAdminObject”，它是处理连接的某些行为的“js”，最后，我使用“Ext.Ajax.js”。 request”从服务器获取数据。当我执行回调时，我可以看到函数“storeInfo”，它将数据设置到变量中(嗯，这似乎就是它正在做的事情)。然后我可以处理包含我需要的所有信息的 dataInfo 变量，并使用方法“getDataInfo”返回它。有什么方法可以在调用服务时直接返回数据吗？我的意思是在java中，例如:

public Object getUserInfo() {
  Object obj = null;
  obj = getFromServer();
  return obj;
}

有什么方法可以用 extJS 和 Javascript 实现这种行为吗？

预先感谢您的时间和帮助。我真的很感激。

Answer 1

ajax 请求的返回 由您指定为callback 函数的任何方法处理。在此示例中，它由 storeInfo() 函数处理。

最接近 Java 示例的是:

getUserInfo: function() {
    getSysAdminObj();
    return this.dataInfo;
}

getSysAdminObj() 函数获取数据并将其存储在 this.dataInfo 中，如代码中所示。由于服务器调用不是异步的(由 async: false 行设置)，因此 javascript 代码会等待服务器调用返回数据，因此您知道 this.dataInfo 将包含请求的数据。但是，如果您设置 async: true，则上面代码中的 return this.dataInfo 行可能会在设置 this.dataInfo 之前执行。

很多时候，最好不要等待服务器请求完成(因为这会阻止浏览器中的任何代码运行，直到可能很慢的服务器调用返回)。因此，async 将设置为 true。为了正确处理这个问题，您必须确保服务器调用后面的代码不依赖于服务器调用的结果，相反，任何依赖于这些结果的内容都必须放置在回调中。/code> 上面提到的功能。

困难在于，从callback函数返回某些内容不会将该值返回到进行原始服务器调用的方法。因此，您不能只是将 return this.dataInfo 移至 callback 函数中并期望它能够工作。相反，您需要使用监听器和事件。 callback 函数应该触发一个事件，告诉正在监听的任何代码已检索到数据，这样监听器就可以对该代码执行其应该执行的操作。

例如，假设您制作了一个 ExtJS 网格面板，并且希望它显示您的代码正在检索的系统管理数据。您可以向上面所示的单例添加一个事件，storeInfo 函数将触发该事件，而不是存储数据，并将数据作为参数传递到该事件中。附加到您的单例将是该事件的监听器，它将接收数据作为其参数，然后将该数据加载到网格面板中。

我知道我在本文中涉及了很多主题，但我不确定您已经知道什么。如果您不熟悉这些主题，可以搜索有关这些主题的更多信息。我希望这对您有所帮助，并能为您指明正确的方向。正如您所看到的，使用 JavaScript 工作与使用 Java 工作有一些重要的区别。

此外，ExtJS 文档非常有帮助，所以如果您还没有检查过这些文档的话。这链接到最新版本http://docs.sencha.com/extjs/4.2.2/#!/api