ExtJS7中如何为所有Ajax及Ajax Store请求添加默认额外参数？

问题描述 #

我有一个基于ExtJS 7开发的大型应用，现在需要从某个节点开始，为所有Ajax请求和Ajax Store请求添加一个额外参数。逐个修改所有Ajax调用和Store工作量极大，因此打算通过定义覆写或原型的方式，让之后发起的所有请求都携带该新参数。我尝试了以下三种写法：

Ext.override(Ext.Ajax, { extraParams: {myNewParam:'New Param' }});  

以及

Ext.Ajax.extraParams = 
{   myNewParam:'New Param'
};

还有

Ext.Ajax.prototype.extraParams = 
{   myNewParam:'New Param'
};

但要么myNewParam未被传输，要么出现JavaScript错误。请问正确的实现方式是什么？

正确实现方案 #

方法1：覆写Ext.Ajax的request方法 #

Ext.Ajax是单例对象，直接覆写它的request方法，在每次请求发起前合并自定义参数，不会覆盖业务代码已有的参数：

Ext.override(Ext.Ajax, {
    request: function(options) {
        // 合并自定义参数到请求配置，保留原有params
        options.params = Ext.apply({}, options.params, {
            myNewParam: 'New Param'
        });
        // 调用原request方法执行请求
        return this.callParent([options]);
    }
});

这种方式能覆盖所有通过Ext.Ajax.request()发起的请求，同时也支持基于AjaxProxy的Store请求（因为Store的AjaxProxy最终会调用Ext.Ajax的request方法）。

方法2：针对Store的AjaxProxy单独处理 #

如果只需要给Store的请求添加参数，或者要和直接Ajax请求区分开，可以覆写Ext.data.proxy.Ajax的buildRequest方法：

Ext.override(Ext.data.proxy.Ajax, {
    buildRequest: function(operation) {
        var request = this.callParent([operation]);
        // 合并自定义参数到请求参数中
        request.params = Ext.apply({}, request.params, {
            myNewParam: 'New Param'
        });
        return request;
    }
});

这种方式仅对使用AjaxProxy的Store生效，不会影响直接调用Ext.Ajax.request()的业务请求。

原写法无效的原因 #

• 直接赋值Ext.Ajax.extraParams：Ext.Ajax作为单例，初始化后已经生成了自己的extraParams实例对象，直接赋值会替换原有引用，但部分请求逻辑可能已提前读取原有对象，导致参数不生效。
• 修改Ext.Ajax.prototype.extraParams：Ext.Ajax是提前创建好的单例，修改原型属性不会影响已经实例化完成的单例对象。
• 直接覆写extraParams属性：这种方式会直接替换extraParams对象，如果业务代码已经设置了该属性，会被完全覆盖，同时部分请求逻辑可能优先使用params而非extraParams，导致参数未被携带。

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