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

【问题标题】：Filter $http request data before it is sent在发送之前过滤 $http 请求数据
【发布时间】：2015-11-21 22:00:07
【问题描述】：

似乎 Angular 会自动去除以 $$ 为前缀的属性，例如$$hashKey，来自请求数据/参数对象。

我想排除我自己不想发送到服务器的纯 UI 属性，但我当然不想使用 $$。

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

而且，使用这种（或自定义）方法的最佳地点在哪里？变换？拦截器？

假设这是我的数据对象：

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

然后我像这样将它保存到服务器：

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

如何在发送请求之前去掉_editing 属性？

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

我需要它发生在所有请求上，它需要适用于深度、复杂的对象。

我正在使用 Angular v1.3.18

谢谢！

【问题讨论】：

标签： javascript angularjs angularjs-http

【解决方案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】：

我建议使用 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);
        }
    };
}])

您可以访问配置对象并从标头或发送的参数中添加或删除属性或进行超时和其他内容，或访问响应并进行广播或smth取决于您的需要

希望对你有帮助

【讨论】：

好的，谢谢，但是您知道 Angular 是否公开了他们用来剥离 $$ 属性的过滤方法吗？如果我可以使用内置解决方案会很棒
所以你可以说 if(config.data.editing.indexOf('_') > -1){do or don't do smth right?} but built in not sure

【解决方案3】：

在调用 post 之前，您可以只 delete 有效载荷中的属性。

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

delete payload._editing

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

【讨论】：

【解决方案4】：

您应该使用拦截器来修改您的请求或响应。顾名思义，它的工作就是拦截一个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。 fiddle 执行 ajax 请求，因此请检查网络选项卡以查看请求负载。

【讨论】：