My API Service kept falling into error case - AngularJS

Question

Service

app.service('service', function ($http, $q) {

    //Testing code
    var self = this;

    self.login = (user) => {
        let defer = $q.defer();
        let login  = {
            username: user.username,
            password: user.password
        };

        $http({
            method: 'POST',
            url: `http://1.1.1.1/login`,
            data: login
        }).then(
            (response) => {
                defer.resolve(response.data)
            },
            (error) => defer.reject(error)
        );

        return defer.promise;
    };

});

Controller

angular.module('app').controller('controller',
    ['$scope', '$rootScope', '$location', 'service','$log' ,'$q',
    function($scope, $rootScope, $location, service, $log, $q) {

        console.log('controller called');

        $scope.changeView = function(view) {
            $location.path(view);
        };

        $scope.user = {username: 'john@nuc.com', password: 'qqq'};
        console.log($scope.user);

        service.login($scope.user)
        .then(
            (response) => {
                console.log('success');
            },
            (error) => console.log('error' + error.data)
        );

    }]);

Result

I see these

{location: "http://ddddd.com/hom…zg2fQ.D9pDqUBD3bcKnH_bPoGCpd-odxJ48LUZTKOGZZnV0Y0"}

I don't know why I am falling into an error case section, but I seem to get a proper response back from the server.

Can someone please shed some lights on this?

That picture only shows the request. What is the response? Status outside the range 200...299 return rejected promises. — georgeawg, May 21 '19 at 17:44
@georgeawg response seems working fine with the data I expected to get back. — code-8, May 21 '19 at 17:53
I can't access `response.status` because my code keep going into the `error` block. — code-8, May 21 '19 at 18:02
The `status` property is also attached to the object returned to the rejection handler. — georgeawg, May 21 '19 at 18:21
I even try placing the debugger, it still only go into the error section. https://i.imgur.com/ZymSdMF.png — code-8, May 21 '19 at 18:46
Handle 302 in error section as in this question - https://stackoverflow.com/questions/18737674/handle-http-302-response-from-proxy-in-angularjs — Naga Sai A, May 21 '19 at 19:35

score 1 · Accepted Answer · edited May 22 '19 at 16:37

The service uses a deferred anti-pattern. While that is not the source of the problem, fix it and add console.log statements:

onboardingApp.service('apiService', function ($http, $q, $localStorage) {

    //Testing code
    var self = this;

    self.login = (user) => {
        ̶l̶e̶t̶ ̶d̶e̶f̶e̶r̶ ̶=̶ ̶$̶q̶.̶d̶e̶f̶e̶r̶(̶)̶;̶
        let login  = {
            username: user.username,
            password: user.password
        };

        return $http({
            method: 'POST',
            url: `http://ddd.com/login`,
            data: login
        }).then(
            (response) => {
                console.log("success", response);
                setAuthToken(response);
                return response.data;
            },
            (error) => {
               console.log("error",error);
               throw error;
            }
        );
    };    
});

This should allow you to diagnose the problem.

After succes login, it should return status code 200 instead of 302. how do I adjust your code to accept 302 as a success instead of an error ?

To convert a rejected promise to a successful promise simply return values to the rejection handler:

       return $http({
            method: 'POST',
            url: `http://ddd.com/login`,
            data: login
        }).then(
            (response) => {
                console.log("success", response);
                setAuthToken(response);
                return response.data;
            },
            (error) => {
               console.log("error",error);
               if (error.status==302) {
                   console.log("Converting erroneous API response");
                   error.status==200;
                   return error.data;
               };
               //ELSE
               throw error;
            }
        );

Status 302 is a "moved permanently" re-direct. The browser should automatically fetch the data from the location specifed. It is not normally passed to the $http service. Is there an [interceptor](https://docs.angularjs.org/api/ng/service/$http#interceptors) configured in the app? — georgeawg, May 21 '19 at 18:40
I even try placing the debugger, it still only go into the error section. https://i.imgur.com/ZymSdMF.png — code-8, May 21 '19 at 18:46
It goes into the error section because the status is outside the range 200...299. Status 302 is outside that range. I am baffled as to why the server is responding with a 302 redirect and the browser is not following the redirect. Also the location for the re-direct should be in the header of the response, not in the body of the response. — georgeawg, May 21 '19 at 18:48
You're 100% correct. it's a of the response code from the backend. After succes login, it should return status code 200 instead of 302. So now.. how do I adjust your code to accept 302 as a success instead of an error ? Just to get this going while waiting for my BE team fix it. — code-8, May 21 '19 at 19:05

My API Service kept falling into error case - AngularJS

Service

Controller

Result

1 Answers1