How to catch http error response in Angular

ajax angularjs asynchronous error-handling

12,566

Try this

factory.login = function(email, password) {
    return $http({
        method: 'POST',
        url: "http://myserver/user/authenticate",
        data: $.param({email: email, password: password}),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function (response) {
       /**Check here your status code 400 if you found that status code is 400 the reject the promise**/
            if (statuscode !==400) {
                        return response.data;
                    } else {
                        // invalid response
                        return $q.reject(response.data);
                    }

        }, function (response) {
            // something went wrong
            return $q.reject(response);
        });
}

and then use following code

 authService.login(email, password)
        .then(function (response) {
            /* go to application */
        },function(error) {
                console.log(error); /* catch 400  Error here */
    });

12,566

Author by

user2364656

Updated on August 02, 2022

Comments

user2364656 almost 2 years
Background
- My Angular application communicates with a database through a set of API endpoints.
- "user/authenticate" endpoints accepts username and password and returns a success (200) or a bad request (400) http response.
Controller
```
authService.login(email, password)
    .success(function (response) {
        /* go to application */
    })
    .error(function (response) {
        /* display proper error message */
    });
```
auth Service
```
factory.login = function(email, password) {
    return $http({
        method: 'POST',
        url: "http://myserver/user/authenticate",
        data: $.param({email: email, password: password}),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    });
}
```
Problem

When username and password fails and API returns 400 response, even though I'm catching the error and I'm displaying a proper message to user, the error appears in browser console.
```
POST http://myserver/user/authenticate 400 (Bad Request)
```
Can I handle errors in a better way?
- jakeforaker almost 9 years
  
  You say "even though I'm catching the error and I'm displaying a proper message to user, the error appears in browser console".. so what is the problem? What error is in the console? If you report the error to the user then what is the issue?
- user2364656 almost 9 years
  
  I don't want user to see an error message in console. Is there a way to prevent that?
- jakeforaker almost 9 years
  
  If the server returns an error response, there is no way around it. If the user is savvy they will see it. An average user will not have their console open. Its up to the front end developer to translate server errors into readable/useful messages to the user. A 400 error is a 400 error, you cannot hide it.
Al-Mothafar about 8 years

Actually you handle the error as the questioner do, you will still get the same error message, i'm using same ur way but not help .
Al-Mothafar about 8 years

You can handle the error, like if bad request to show message to user with statusText, but still you get an error in console, POST http://localhost:8100/api/users 400 (Bad Request) this for me that if I try to post user with same email, in UI i handle it an dshow that user already exist but in console i'll still get this message, the questioner need to get ride of this in console, (which actually impossible).