Ext JS 6中为所有AJAX请求添加400、500异常处理

针对你已经实现全局AJAX请求头设置的基础上，我们可以通过监听Ext.Ajax的requestexception事件来统一处理400和500状态码的异常，这样所有AJAX请求都会自动触发这个全局处理逻辑，不用在每个请求里单独编写错误处理代码。

修改后的完整代码 #

Ext.define('Inertia.view.BaseUrl', {
    singleton : true,
    constructor : function(config) {
        this.initConfig(config);
        // 保留原有的请求前处理逻辑
        Ext.Ajax.on('beforerequest', this.onBeforeRequest, this);
        // 添加全局请求异常监听
        Ext.Ajax.on('requestexception', this.onRequestException, this);
    },
    onBeforeRequest : function(connection, options) {
        options.headers = {
            'token': 'random-token',
            'code': 'random-codeABC'
        };
    },
    onRequestException : function(connection, response, options) {
        // 根据响应状态码判断异常类型
        switch(response.status) {
            case 400:
                // 处理400错误：通常是客户端参数格式或内容错误
                Ext.Msg.alert('提示', '请求参数有误，请检查输入后重试');
                // 可扩展逻辑：比如清空错误表单字段、记录错误日志等
                break;
            case 500:
                // 处理500错误：服务器内部异常
                Ext.Msg.alert('提示', '服务器暂时无法处理请求，请稍后重试');
                // 可扩展逻辑：比如上报错误信息到监控系统、通知运维人员等
                break;
            // 若需要处理其他状态码，可在这里继续扩展分支
            // case 401:
            //     Ext.Msg.alert('提示', '登录状态已过期，请重新登录');
            //     break;
        }
        
        // 可选：支持特定请求跳过全局错误处理
        if(options.skipGlobalErrorHandler) {
            return;
        }
        
        // 阻止框架默认的错误提示（如果项目中有配置的话）
        response.preventDefault();
    }
});

关键细节说明 #

• requestexception事件会在AJAX请求失败时触发，覆盖HTTP错误状态码（4xx、5xx）、网络中断等所有异常场景。
• 通过response.status可以直接获取HTTP响应的状态码，我们用switch分支做针对性处理，符合不同错误场景的业务需求。
• 如果你有个别请求需要自定义错误逻辑，可以在发起请求时添加skipGlobalErrorHandler: true标记，示例如下：

  Ext.Ajax.request({
      url: '/api/custom-endpoint',
      params: { /* 请求参数 */ },
      skipGlobalErrorHandler: true,
      failure: function(response) {
          // 该请求的专属错误处理逻辑
      }
  });
  

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