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

Question

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

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

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

而且，使用此（或自定义）方法的最佳位置在哪里？变换？拦截机？

假设这是我的数据对象：

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

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

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

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

编辑： 或任何以 _

开头的属性

我需要它对所有请求都发生，并且它需要对深层、复杂的对象起作用。

我正在使用 Angular v1.3.18

谢谢！

Answer 1

在调用 post.

之前，您可以只 delete 来自负载的属性

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

delete payload._editing

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

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

您可以访问配置 object 并从 header 添加或删除属性或发送参数或设置超时等，或者访问响应并进行广播或 smth 取决于什么你需要

希望对您有所帮助

Answer 3

您应该使用拦截器来修改您的请求或响应。顾名思义，它的工作是拦截 http 请求或响应。引自 angular documentation:

For purposes of global error handling, authentication, or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses, it is desirable to be able to intercept requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests.

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 请求，因此请检查网络选项卡以查看请求负载。

Answer 4

当然，使用 $httpProvider.interceptors，但是对于剥离部分，您可以使用 lodash:

做一些不错的事情

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

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

这个returns{a: 1, b: 2}.

但是如果你不想使用外部库而只是依赖Angular的实用工具包，你可以这样做：

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

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

Filter $http request data before it is sent

javascript

angularjs

angularjs-http