Problems with the implementation of POST request (angularjs ($http))

Question

I am trying to perform a POST request, but get the following error:

Error: Unexpected request: POST http://192.168.88.54:3000
No more request expected
at $httpBackend (file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular-mocks/angular-mocks.js:1176:9)
at sendReq (file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular/angular.js:7721:9)
at serverRequest (file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular/angular.js:7455:16)
at wrappedCallback (file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular/angular.js:10696:81)
at wrappedCallback (file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular/angular.js:10696:81)
at file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular/angular.js:10782:26
at Scope.$eval (file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular/angular.js:11697:28)
at Scope.$digest (file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular/angular.js:11525:31)
at Scope.$apply (file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular/angular.js:11803:24)
at HTMLButtonElement.<anonymous> (file:///Users/vasyasemenov/workspace/tamua/ogogo-frontend/build/vendor/angular/angular.js:17690:21)

My implementation of the POST request:

angular.module('App')
.config(['$httpProvider',
    function($httpProvider) {
        $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    }
])
.service('API', function API($http, $q, PROD, PROD_HOST, DEV_HOST, API_TOKEN) {
    var self = this;

    self.host = (PROD ? PROD_HOST : DEV_HOST);

    self.performRpcCall = {
        post: function(url, params) {
            var deferred = $q.defer();
            var data = {
                jsonrpc: '2.0',
                params: params,
                method: url
            };
            $http.post(self.host, data).success(function(data) {
                if(data.result) {
                    deferred.resolve(data.result);
                }else{
                    deferred.reject(data.error);
                }
            }).error(function(data, status, headers, config) {
                deferred.reject(data);
            });
            return deferred.promise;
        }
    };

    self.registerUser = function(params) {
        params.token = API_TOKEN;
        return self.performRpcCall.post('/api/users', params);
    };
});

Where is the error? Thank you

Why are you using `$q` around your `$http.post` call? `$http` already returns a promise, just return that then the data in the success or error chained calls. — m.e.conroy, Oct 29 '14 at 13:10
Do you know what the "deferred anti-pattern" is? Have a look at **[this](http://stackoverflow.com/questions/23803743/what-is-the-deferred-antipattern-and-how-do-i-avoid-it)** — Josep, Oct 29 '14 at 13:20
Are you unit testing this? I see `$httpBackend` in the error output, that is a mock object to test `$http` requests without having to actually contact the server. https://docs.angularjs.org/api/ngMock/service/$httpBackend — m.e.conroy, Oct 29 '14 at 13:35
No, this is not a test. I don`t understand why this error... — MonstroDev, Oct 29 '14 at 13:52

m.e.conroy · Answer 1 · 2014-10-29T13:29:57.047

Not sure if this is the problem or not but I've had trouble before when passing an object as the data parameter to $http.post before.

To correct that I've used jQuery's $.params(data) in the past or...

data = {
    someVar : someVal,
    anotherVar : anotherVal
};
return $http({
        method : 'POST',
        url : 'someURL/path/to/api/script',
        params : data,
        headers : {'Content-Type' : 'application/x-www-form-urlencoded'}
    }).success(function(response){
        return (angular.isDefined(response.data.result)) ? response.data.result : response.data.error;
    }).error(function(response){
        return { data : response.data, status : response.status };
    });

data gets JSONified for the params var when passing $http a configuration object. Of course you already set the header with the provider. There is also a data config property, I haven't used that but I think it does the same but just doesn't JSONify the data into a string but rather incorporates it into the header as message data.

The example I've seen, but the situation is similar. – MonstroDev Oct 29 '14 at 13:53 — MonstroDev, Oct 29 '14 at 13:53

Problems with the implementation of POST request (angularjs ($http))

1 Answers1