在发送之前过滤$ http请求数据

时间:2015-08-27 13:29:52

标签: javascript angularjs angularjs-http

似乎Angular会自动剥离前缀为$$的属性,例如$$hashKey,来自请求数据/参数对象。

我想排除我自己不希望发送到服务器的仅限UI的属性,但我当然不想使用$$

Angular会以一种我可以使用它来过滤具有不同前缀的对象的方式公开他们的$$过滤器方法吗?

并且,哪里是使用此(或自定义)方法的最佳位置?转变?拦截器?

让我们说这是我的数据对象:

var payload = {
    id: 12345,   
    name: 'Bob',
    _editing: true
};

我将它保存到服务器上:

$http({
    method: 'POST',
    url: '/save',
    data: payload
});

如何在发送请求之前删除_editing属性?

编辑:或以_

开头的任何媒体资源

我需要它发生在所有请求中,它需要适用于深层复杂的对象。

我正在使用Angular v1.3.18

谢谢!

4 个答案:

答案 0 :(得分:1)

我建议使用http拦截器

在您的配置中,您只需将此行放在app.js

.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
})

我创建了一个像这样的工厂

.factory('httpInterceptor', ['$q', '$rootScope', '$filter', function ($q, $rootScope, $filter) {
    var canceller = $q.defer();
    //some vars here
    return {

        request: function (config) {


            //Do some magic here
            //modify the header for example
            config.headers.someHeader = something;
            //or set a timeout if it takes too long
            config.timeout = 20000;

            return config || $q.when(config)
        },

        response: function (response) {

            //handle Response if you want           
            return response || $q.when(response);
        },

        responseError: function (response) {

            //handle error here if you want
            return $q.reject(response);
        }
    };
}])

您既可以访问配置对象,也可以在标题中添加或删除属性,或者发送params或者发送超时和内容,或者访问响应并根据需要进行广播或smth

希望这有帮助

答案 1 :(得分:1)

当然,请使用$httpProvider.interceptors,但对于剥离部分,您可以使用lodash做一些不错的事情:

var o = {_f: 1, _b: 2, a: 1, b: 2 }

_.omit(o, function (value, key) { 
  return key.indexOf('_') === 0; 
});

返回{a: 1, b: 2}

但是如果您不想使用外部库并且只依赖Angular的实用工具包,您可以这样做:

angular.forEach(o, function (value, key) { 
  if (key.indexOf('_') === 0) { 
    delete o[key] 
  }
});

答案 2 :(得分:0)

在致电delete之前,您可以post来自有效负载的属性。

var payload = {
    id: 12345,   
    name: 'Bob',
    _editing: true
};

delete payload._editing

$http({
    method: 'POST',
    url: '/save',
    data: payload
});

答案 3 :(得分:0)

您应该使用拦截器来修改您的请求或响应。正如名称本身所暗示的那样,它的工作是拦截http请求或响应。引自角documentation

  

出于全局错误处理,身份验证或任何类型的目的   请求或的同步或异步预处理   对响应进行后处理,希望能够进行拦截   在将它们交给服务器和响应之前请求   它们被移交给发起这些的应用程序代码   请求。

var app = angular.module('myApp', []);

app.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('myInterceptor');
}]);

app.factory('myInterceptor', ['$q', function($q) {  

    var myInterceptor = {
        request: function(config) {
            delete config.data._editing;

            return config;
        }   
    };

    return myInterceptor;
}]);

app.controller('myController', ['$http', function($http) {
    var payload = {
        id: 12345,   
        name: 'Bob',
        _editing: true
    };

    $http({
        method: 'POST',
        url: '/echo/json/',
        data: payload
    });
}]);

我为此准备了一份工作jsfiddle。小提琴执行ajax请求,因此请检查网络选项卡以查看请求有效负载。