api get request, handle 404

Question

I am looking into handling 404 requests from api call where I am returning html when it occours.

$http.get('/api/house/' + $routeParams.id)
   .then(function (res) {

    $scope.houses = res.data;

}, function (err) {

    //when not found I am binding html from response
    if(err.status == 404){  
        $scope.errHtml = $sce.trustAsHtml(err.data);
    }

});

returned html for 404:

<!doctype html>
<html>
<head>

   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="/resources/css/bootstrap.min.css">

   <title>404</title>

</head>
<body>

    <div>test 404</div>

</body>
</html>

in view I have:

<div ng-bind-html="errHtml"></div>

I am trying to understand if this is the best way to handle 404 from api call in angular js

you dont like "<!doctype html><html><head>" again in your page. better way to create a state and then in error function use state.go("pageNotFound"); — R. S.
– R. S., Commented Jan 11, 2018 at 12:56

Muhammed Anees · Accepted Answer · 2018-01-11 13:46:08Z

1

The best way to handle error responses in angularjs is to write an $http interceptor. Just write an interceptor service and push it to $httpProvider interceptors and then you can handle all your errors at one place.
See the Documentation here The code will look like

.factory('httpRequestInterceptor', function ($q, $location) {
    return {
        'responseError': function(rejection) {
            if(rejection.status === 404){
                $location.path('/404/');                    
             }
            return $q.reject(rejection);
         }
     };
});

Then, you can inject this service into interceptor in config block

.config( function ($httpProvider) {
    $httpProvider.interceptors.push('httpRequestInterceptor');
});

You can handle other error codes also here and redirect accordingly. Hope this will help.

answered Jan 11, 2018 at 13:46

Muhammed Anees

1,8601 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user1751287 Over a year ago

this will also relocate to /404 and wont keep the route

Muhammed Anees Over a year ago

You can have a route .when("/404", { templateUrl : "404.html" }) and direct the user there with `$location.path('/404'); or if you want to show some error alerts, you can do the same here without redirecting to 404@user1751287

user1751287 Over a year ago

I do have it but I also have backend 404 handler hence after intercept route becomes websites.com/404

Muhammed Anees Over a year ago

So, once the error occurs, what do you want to show? @user1751287

Muhammed Anees Over a year ago

I don't think there is standard way with ng-route to achieve this.

|

Collectives™ on Stack Overflow

api get request, handle 404

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related