如何从API获取logLevel匹配jobId存入Store并在表格展示

需要从API获取logLevel列表，关联jobId存入Store并在表格展示，要求页面打开仅发起一次请求，避免重复请求。

模型定义 #

Ext.define('U4.fundamentals.backgroundjobs.model.BackgroundJobsMonitoringModel', {  
extend: 'Ext.data.Model',
fields: [
    { name: 'jobId', type: 'string', mapping: 'jobId'},
    { name: 'taskId', type: 'string', mapping: 'lastTaskRun.taskId'},
    { name: 'updatedAt', type: 'date', mapping: 'lastTaskRun.updatedAt'},
    { name: 'status', type: 'string', mapping: 'lastTaskRun.status'},
    { name: 'canRunOnDemand', type: 'boolean', defaultValue: true },
    { name: 'icon', persist: false },
    { name: 'logLevel', type: 'int'}
]});

Store配置（API请求） #

proxy: {
    type: 'rest',
    api: {
        read: U4.getApiPath('server-jobs'),
        run: U4.getApiPath('server-jobs'),
        kill: U4.getApiPath('server-jobs/{jobId}/{taskId}/kill'),
        config: U4.getApiPath('server-jobs-configuration/loglevel/{jobId}'),
        async: U4.getApiPath('server-jobs-configuration/loglevel')
    },

sendConfigTaskRequest3: function () {
    var me = this;

    return new Promise(function (resolve, reject) {
        Ext.Ajax.request({
            url: U4.data.proxy.UrlTemplate.replaceParameters({}, me.proxy.api.async),
            method: 'GET',
            success: function (data) {
                resolve(data);
            },
            failure: function (data) {
                reject(data);
            }
        });
    });
}

注：该async接口为全量获取，无需传入参数

之前的尝试（未成功） #

曾在控制器中通过render/afterrender监听器调用以下函数，但未生效：

onConfigTaskRequestSuccess: function (grid, response) {
    var me = this;
    var store = grid.getStore();
    store.sendConfigTaskRequest3()
        .then(function (response) {
            var data = Ext.decode(response.responseText); // Decode the response

            // Loop through the data and set the LogLevel property for each row in the store
            Ext.each(data, function (item) {
                var record = store.findRecord('jobId', item.JobId); // Find the record in the store based on the jobId
                if (record) {
                    record.set('logLevel', item.LogLevel); // Set the LogLevel property of the record
                }
            });
        })
        .catch(function (error) {
            // Handle errors here
        });
},

当前临时方案（存在重复请求问题） #

通过jobId列渲染器触发请求，但每行会发起一次重复请求，不符合需求：

jobId列渲染器代码 #

renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
            Ext.defer(function () {

                var promise = store.sendConfigTaskRequest3();

                return new Promise(function (resolve, reject) {
                    promise.then(function (response) {
                        var data = Ext.decode(response.responseText);
                        Ext.each(data, function (item) {
                            var record = store.findRecord('jobId', item.jobId); // Find the record in the store based on the jobId
                            if (record) {
                                console.log("record log", item.jobId, item.logLevel);
                                record.set('logLevel', item.logLevel); // Set the LogLevel property of the record
                                console.log(record.get('logLevel'), "RECORD LOG");
                                resolve(true);
                            }
                        });
                    }).catch(function (error) {
                        reject(error);
                    })
                });
                
            }, 1500);

            return value;
        }

logLevel列代码（依赖jobId渲染） #

{
        text: 'LowSignal',
        flex: 1,
        dataIndex: 'logLevel',
        renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
            if (value === 0) {
                return '<div class="u4f-backgroundjobs-alert-icon" style="height: 20px; width: 20px; margin:0px 43.33%" title="Full Log Activated!"></div>';
            } else {
                return 'Loading...';
            }
        },
        align: 'center',
        draggable: false,
        resizable: false,
    }

解决方案：单次请求实现同步 #

1. 修改Store，添加请求缓存与批量更新逻辑 #

Ext.define('U4.fundamentals.backgroundjobs.store.BackgroundJobsMonitoringStore', {
    extend: 'Ext.data.Store',
    model: 'U4.fundamentals.backgroundjobs.model.BackgroundJobsMonitoringModel',
    // 新增状态标记与缓存Promise
    hasLoadedLogLevels: false,
    logLevelPromise: null,

    sendConfigTaskRequest3: function () {
        var me = this;
        // 缓存请求，避免重复发起
        if (me.logLevelPromise) {
            return me.logLevelPromise;
        }
        me.logLevelPromise = new Promise(function (resolve, reject) {
            Ext.Ajax.request({
                url: U4.data.proxy.UrlTemplate.replaceParameters({}, me.proxy.api.async),
                method: 'GET',
                success: function (data) {
                    resolve(data);
                },
                failure: function (data) {
                    reject(data);
                }
            });
        });
        return me.logLevelPromise;
    },

    // 批量更新Store中的logLevel
    updateLogLevels: function() {
        var me = this;
        if (me.hasLoadedLogLevels) return;
        
        me.sendConfigTaskRequest3().then(function(response) {
            var logData = Ext.decode(response.responseText);
            // 构建jobId到logLevel的映射表，提升查询效率
            var logMap = {};
            Ext.each(logData, function(item) {
                logMap[item.jobId] = item.logLevel;
            });
            // 遍历Store更新记录
            me.each(function(record) {
                var jobId = record.get('jobId');
                if (logMap[jobId] !== undefined) {
                    record.set('logLevel', logMap[jobId]);
                }
            });
            me.hasLoadedLogLevels = true;
        }).catch(function(error) {
            console.error('加载logLevel失败:', error);
            // 可添加错误提示逻辑
        });
    }
});

2. 在控制器中触发单次请求 #

监听Store加载完成事件，确保仅执行一次更新：

init: function() {
    this.control({
        'backgroundjobs-monitoring-grid': {
            afterrender: function(grid) {
                var store = grid.getStore();
                // Store已加载则直接更新，否则监听load事件
                if (store.isLoaded()) {
                    store.updateLogLevels();
                } else {
                    store.on('load', store.updateLogLevels, store, { single: true });
                }
            }
        }
    });
}

3. 优化logLevel列渲染器 #

根据实际数据状态显示内容：

renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
    // 未加载完成时显示加载状态
    if (value === undefined || value === null) {
        return 'Loading...';
    }
    if (value === 0) {
        return '<div class="u4f-backgroundjobs-alert-icon" style="height: 20px; width: 20px; margin:0px 43.33%" title="Full Log Activated!"></div>';
    }
    // 可添加其他logLevel值的显示逻辑
    return value;
}

关键优化点 #

• 请求缓存：通过logLevelPromise确保同一Store实例仅发起一次请求
• 映射表优化：避免多次遍历Store查询记录，提升性能
• 单次触发：利用Store的load事件或grid的afterrender事件，确保页面加载时仅执行一次更新
• 状态标记：hasLoadedLogLevels防止重复执行更新逻辑

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