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

Question

似乎Angular会自动从请求数据/参数对象中剥离以$$为前缀的属性，例如$$hashKey。我想要排除自己的仅限UI的属性，这些属性我不想发送到服务器，但是当然我不想使用$$。

Angular是否公开了他们的$$过滤方法，以便我可以使用它来过滤具有不同前缀的对象？

最好在哪个位置使用此（或自定义）方法？转换器？拦截器？

假设这是我的数据对象：

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

我这样将其保存到服务器上：

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

在请求发送前，我该如何去除_editing属性？

编辑：或者任何以_开头的属性。

我需要对所有请求进行操作，并且它需要适用于深层次、复杂的对象。

我正在使用Angular v1.3.18。

谢谢！

- Daniel Crisp

Answer 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);
        }
    };
}])

你可以访问配置对象并添加或删除标题或发送参数的属性，或者设置超时和其他内容，也可以访问响应并根据需要进行广播或其他操作。希望这能帮到你。

- stackg91

---

好的，谢谢。但是你知道Angular是否公开了他们用于剥离$$属性的过滤器方法吗？如果我能使用内置解决方案就太好了。 - Daniel Crisp

所以你可以简单地说，如果（config.data.editing.indexOf('_') > -1）{做或不做某事，对吗？} 但内置的不确定。 - stackg91

Answer 2

当然，可以使用$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] 
  }
});

- Ahmed Nuaman

Answer 3

在调用 post 之前，您可以从有效载荷中直接 删除 属性。

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

delete payload._editing

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

- machinehead115

Answer 4

你应该使用拦截器来修改你的请求或响应。正如其名称所示，它的工作是拦截 HTTP 请求或响应。引用自 Angular 文档：

为了全局错误处理、身份验证或任何类型的同步或异步请求预处理或响应后处理，希望能够在将请求交给服务器和将响应交给启动这些请求的应用程序代码之前拦截请求。

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。这个 fiddle 执行 ajax 请求，所以请检查网络选项卡以查看请求负载。

- Subash