ExtJS技术问题：如何跨代理传递Ajax请求数据至其他服务extraParams

我来帮你搞定这个问题哈！你现在的核心痛点是异步获取的数据怎么传递给Store Proxy的extraParams，毕竟Ext.Ajax.request是异步的，直接同步返回肯定行不通。结合你已经写的单例类，咱们可以分步骤来处理：

1. 完善单例类，处理异步逻辑 #

首先，你的getMyId方法是异步请求，没法直接返回结果，咱们给它加个回调函数，同时缓存获取到的ID避免重复请求。修改后的单例类如下：

Ext.define('MyApp.MyInfo', {
    requires: [],
    singleton: true,
    // 缓存已获取的ID，减少重复请求
    cachedMyId: null,

    getMyId: function(callback) {
        var me = this;
        
        // 如果已有缓存ID，直接通过回调返回
        if (me.cachedMyId) {
            callback(me.cachedMyId);
            return;
        }

        Ext.Ajax.request({
            url: myUrl() + '/info',
            success: function(response) {
                var result = Ext.decode(response.responseText);
                // 这里根据实际返回的数据结构调整字段，比如result.data.myId
                me.cachedMyId = result.myId;
                // 用回调把ID传递出去
                callback(me.cachedMyId);
            },
            failure: function() {
                // 处理请求失败的情况，比如传null或打印错误
                callback(null);
                console.error('获取MyId失败');
            }
        });
    }
});

2. 将ID传递给Store的Proxy #

这里分两种常用场景，你可以根据自己的需求选择：

方法一：先获取ID再初始化Store #

如果你的Store不需要立即加载，可以先拿到ID再配置Store的Proxy：

MyApp.MyInfo.getMyId(function(myId) {
    if (myId) {
        Ext.create('Ext.data.Store', {
            storeId: 'TargetStore',
            proxy: {
                type: 'ajax',
                url: '你的目标Web服务地址',
                extraParams: {
                    // 把获取到的ID塞进extraParams
                    myId: myId
                },
                reader: {
                    type: 'json'
                }
            }
        });
        // 初始化完成后加载Store
        Ext.getStore('TargetStore').load();
    }
});

方法二：动态设置Proxy参数（适合已存在的Store） #

如果Store已经创建，或者需要每次请求都确保用最新的ID，可以监听Proxy的beforerequest事件，在请求发送前动态注入参数：

Ext.define('MyApp.store.TargetStore', {
    extend: 'Ext.data.Store',
    proxy: {
        type: 'ajax',
        url: '你的目标Web服务地址',
        reader: {
            type: 'json'
        },
        listeners: {
            beforerequest: function(proxy, operation) {
                // 先暂停默认请求流程
                operation.setStarted(false);
                
                MyApp.MyInfo.getMyId(function(myId) {
                    if (myId) {
                        // 动态设置extraParams
                        proxy.setExtraParam('myId', myId);
                    }
                    // 手动触发请求
                    operation.setStarted(true);
                    proxy.doRequest(operation);
                });
                
                // 返回false阻止默认请求发送
                return false;
            }
        }
    }
});

可选优化：用Promise简化异步逻辑 #

如果你的ExtJS版本是6+，支持Promise的话，可以把getMyId改成返回Promise，代码会更简洁：

getMyId: function() {
    var me = this;
    return new Ext.Promise(function(resolve, reject) {
        if (me.cachedMyId) {
            resolve(me.cachedMyId);
            return;
        }
        Ext.Ajax.request({
            url: myUrl() + '/info',
            success: function(response) {
                var result = Ext.decode(response.responseText);
                me.cachedMyId = result.myId;
                resolve(me.cachedMyId);
            },
            failure: function() {
                reject(new Error('获取MyId失败'));
            }
        });
    });
}

使用时就可以用then链式调用：

MyApp.MyInfo.getMyId().then(function(myId) {
    // 设置Store参数或加载Store
}).catch(function(error) {
    console.error(error);
});

内容的提问来源于stack exchange，提问作者Nuri Engin