Angular JS : Post call is going in Success as well as Error Method

Question

I know I amy look like foolish while asking this, but I am not able to figure this out.

I have written a service which handles the post call to the server. $q service is returning the promise back to the controller function which has called the service.

Service :

app.service('AjaxService', ['$http','$q','$log', function($http,$q,$log) {
    return {
        getSearchresultPost : function(url,data){
            var defer = $q.defer();
            $http.post(url, data)
            .then(function(data, status, header, config){
                defer.resolve(data);

            }).then(function(data, status, header, config){
                defer.reject(data);
            });
            return defer.promise;
        }
    };
}]);

Controller

app.controller("kitGuideNavigationController",['$scope','$window','$timeout','AjaxService',function($scope,$window,$timeout,AjaxService){
 AjaxService.getSearchresultPost("/services/knowledge/getProducts",pathToCall)
        .then(function(data){
            console.log("Data ",data);
        }).then(function(data){
            console.log("Some Error Occured");
        });
}]);

When I try to run the code I get both the consoles getting printed.

I am not getting what is getting wrong.Can someone help?

You can use the differed returned by `$http.post()`, no need to create custom differed unless you have fancy stuff like nested calls — T J, Feb 13 '17 at 16:08

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

change the second "then" to "catch", should fix this. You have to do this in both cases.

    app.controller("kitGuideNavigationController",['$scope','$window','$timeout','AjaxService',function($scope,$window,$timeout,AjaxService){
 AjaxService.getSearchresultPost("/services/knowledge/getProducts",pathToCall)
        .then(function(data){
            console.log("Data ",data);
        }).catch(function(data){
            console.log("Some Error Occured");
        });
}]);

update

also as I saw, you are using the $http, check here

edited May 23 '17 at 12:25

Community

1
1

answered Feb 13 '17 at 13:38

Alexander_F

2,831
3
28
61

Thanks a lot @Fribu :) – vaibhav Feb 13 '17 at 13:43
@vaibhav Why call `.then()` twice, anyway? If it were me, I'd just have used a single `.then()` and used if conditions to decide whether to resolve or reject the original promise. – cst1992 Feb 13 '17 at 13:45
actually I have to write the code from Catch as well that's why i am using the second then for error handling. – vaibhav Feb 13 '17 at 14:10
@vaibhav great I could help, you may accept the answer – Alexander_F Feb 13 '17 at 17:59

score 1 · Answer 2 · answered Feb 13 '17 at 16:03

You can change your service and pass a second parameter(error function) in $http.post like this(documentation: https://docs.angularjs.org/api/ng/service/$http):

app.service('AjaxService', ['$http','$q','$log', function($http,$q,$log) {
    return {
        getSearchresultPost : function(url,data){
            var defer = $q.defer();
            $http.post(url, data)
            .then(function(data, status, header, config){
                defer.resolve(data);

            }, function(error, status, header, config){
                defer.reject(error);
            });
            return defer.promise;
        }
    };
}]);

And in your controller you can pass a second parameter too:

app.controller("kitGuideNavigationController",['$scope','$window','$timeout','AjaxService',function($scope,$window,$timeout,AjaxService){
 AjaxService.getSearchresultPost("/services/knowledge/getProducts",pathToCall)
        .then(function(data){
            console.log("Data ",data);
        }, function(error){
            console.log("Some Error Occured", error);
        });
}]);

score 0 · Answer 3 · answered Feb 13 '17 at 17:43

There is no need to manufacture a promise with $q.defer as the $http service already returns a promise:

app.service('AjaxService', ['$http','$q','$log', function($http,$q,$log) {
    return {
        getSearchresultPost : function(url,data){
            //var defer = $q.defer();
            var promise = $http.post(url, data)
            //.then(function(data, status, header, config){
            .then(function (response) {
                var data = response.data;
                //defer.resolve(data);
                //return data to resolve
                return data;    
            //}).then(function(data, status, header, config){
            }).catch(function(response) {
                var data = response.data;
                //defer.reject(data);
                //throw data to reject with value
                throw data;
            });
            //return defer.promise;
            return promise;
        }
    };
}]);

Also notice that the .then and .catch methods invoke their functions with a response object, not data but returning (or throwing) the data property to the handler creates a new promise that resolves (or rejects) with that value.

AjaxService.getSearchresultPost(url,pathToCall)
    .then(function(data){
        console.log("Data ",data);
    //}).then(function(data){
    }).catch(function(data) {
        console.log("Some Error Occured");
    });

For more information, see AngularJS $q Service API Reference - Chaining Promises

Angular JS : Post call is going in Success as well as Error Method

3 Answers3

update