Javascript：拦截所有AJAX调用，重点处理服务器异常

背景

上篇文章http://www.cnblogs.com/happyframework/p/3241063.html介绍了如何以AOP的形式处理服务器异常，这让服务器端的编程逻辑变的非常整洁，本文介绍如何在客户端统一处理服务器返回的异常信息。

一点考虑

上篇隐藏了一些概念，即：开发或架构之处，就应当确定哪些异常要返回给UI、哪些异常要写入日志、哪些异常要包装以后返回给UI等等。

AJAX拦截

如何拦截AJAX，不外乎这三种方式：

1. 注册全局监听函数。
2. 封装一个全局入口。
3. 重写或覆盖客户端库的AJAX功能（Javascript是动态语言，可以运行时替换任何东西）。

最简单的莫过于第一种方式，让我们看一下代码：

拦截事件

/// <reference path="/ext/ext-all-debug-w-comments.js" />
Ext.define('Tenoner.AjaxMonitor', {
    singleton: true,
    requires: ['Ext.Ajax'],

    errorHandlers: [],

    constructor: function () {
        var me = this;

        Ext.Ajax.timeout = 120000;

        Ext.Ajax.on('requestcomplete', function (connection, response, option) {
            me.processError(response);
        });

        me.callParent(arguments);
    },

    addErrorHandler: function (errorHandler) {
        var me = this;

        me.errorHandlers.push(errorHandler);
    },

    processError: function (response) {
        var me = this;

        var result = Ext.decode(response.responseText);

        if (!result || !result.errorCode) {
            return;
        }

        Ext.Array.each(me.errorHandlers, function (errorHandler) {
            Ext.Object.each(errorHandler, function (errorCode, handler) {
                if (errorCode == result.errorCode) {
                    handler();
                }
            });
        });
    }
});

注册一个异常拦截方法

        Tenoner.AjaxMonitor.addErrorHandler({
            'CM001': function () {
                var current = window;

                while (current != current.parent) {
                    current = current.parent;
                }

                current.location.href = '/Login.htm';
            }
        });

我们还能做哪些？

如果希望自动弹出错误提示，也可以以这种形式处理，这样Javascript代码中也尽可能的是正常的代码。

备注

本文以ExtJs为例，不过思路应当适合所有AJAX框架。