问题描述

最近要对老项目进行维护,后端给原来所有接口返回的数据外都要再套上一层对象,前端以前所有使用ajax获得的数据都要从新的大对象中获取,由于要改的接口过多,所以用ajax的拦截器来解决这个问题

开发框架

jQuery v1.10.2 + miniUI

解决方法

官网上可以查到,jQuery的ajax拦截器有多个,比较常见的ajax写法应该是这样的

$.ajax({
    url: searchUrl,
    async: true,
    type: "get",
    data:param,
    dataType: 'json',
    success: function (result) {
        page.logic.initChart(result);
        page.logic.initTable(result);
    }, error: function (result) {
        mini.alert(errorResult.collection.error.message);
    }, complete: function() {
        mini.unmask();
    }
})

从中可以看到jQuery的ajax是一个函数,函数的参数是接口url,接口类型,传参,回调方法等,这些在ajax生成XML对象前就已经定好了,如果要添加统一拦截的方法的话,也应该是在发送前添加,所以更改ajaxSetup中的beforeSend中的内容,就可以做到响应的拦截,代码如下

$.ajaxSetup({
    beforeSend: function(xhr, options) {
        var originalSuccess = options.success
        options.success = function(data, textStatus, jqXhr) {
            if ('result' in data) {
                data = data.result
            }
            originalSuccess.apply(this, arguments)
        }
    }
})

options.success对应的就是成功后success里的值,我这里原本的数据在新的对象里属性名叫result,所以用result做判断,把上面那一段代码原封不动放到js的顶部就可以了

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐