Error success is not a function in Angularjs

Question

I am facing a problem with my code I can't understand whats going wrong on it.. interesting things is that api is calling quite good but its not going into success function orders.pay(ss($scope.ss, $scope.oo)) .success(function (data) {

angular.module('services.orders', ['users.service'])
  .factory('orders', ['$http', 'user', '$q', function ($http, user, $q) {
    'use strict';

function genericSuccess (res) {
      return res.data.data; // yes, really.
    }


function pay (payment) {
      return $http.post('v1/payment/authorize', payment)
        .then(genericSuccess);
    }



orders.pay(ss($scope.ss, $scope.oo))
          .success(function (data) {

    //It should called success either it should gone to error but it says
    //Error:orders.pay(...).success is not a function
    //can any one suggest how to solve it

            notify.message('Thank you!');
          }).error(function (data) {
          notify.message('Error: ' + data.data.message);
        });

Answer 1

function genericSuccess (res) {
  return res.data.data; // yes, really.
}

function pay (payment) {
  return $http.post('v1/payment/authorize', payment).then(function(success) {
    return genericSuccess(success);
  });
}

Try that, see if that's better?

Answer 2

As you can see in the angular documentation https://docs.angularjs.org/api/ng/service/$http

success and error are no more available. If you still want to use .success and .error in your code you can do something like this:

angular.module('services.orders', ['users.service'])
  .factory('orders', ['$http', 'user', '$q', function ($http, user, $q) {
    'use strict';

    function genericSuccess(res) {
      return res.data.data; // yes, really.
    }


    function pay(payment) {
      var successCallback, errorCallback;
      function successFn(callback) {
        if (typeof callback == 'function'){
          successCallback = callback;
        }

        return successErrorResponse;
      }

      function errorFn(callback) {
        if (typeof callback == 'function') {
          errorCallback = callback;
        }

        return successErrorResponse;
      }

      var successErrorResponse = {
        success: successFn,
        error: errorFn
      };


      $http.post('v1/payment/authorize', payment)
        .then(
          function (response) {
            if(successCallback) {
              successCallback(response)
            }
          },
          function (response) {
            if(errorCallback) {
              errorCallback(response)
            }
          });




      return successErrorResponse;


    }


    orders.pay(ss($scope.ss, $scope.oo))
      .success(function (data) {

        //It should called success either it should gone to error but it says
        //Error:orders.pay(...).success is not a function
        //can any one suggest how to solve it

        notify.message('Thank you!');
      }).error(function (data) {
      notify.message('Error: ' + data.data.message);
    });

  }])

but you should really be adopting the new angular api.

Answer 3

The issue your running into is the fact that .success and .error is a wrapper, an abstraction that only the $http exposes, not the core promise object.

The issue is the promise returned from $http is extended to have these extra properties, however subsequent promises are not. Your first .then in your service is returning a normal promise which does not have a .success method.

This is one of the reasons it has been deprecated, you should instead use .then and .catch.

So this will work:

$http.get().success().then();

but this will not:

$http.get().then().success();

but instead your should really be doing:

$http.get().then().then();

See the following fiddle which will demo it Fiddle

Hope that makes sense.