CODEWITHSUNDEEP
angularjs
Fredrik L
Fredrik L

Reputation: 1800

Error handling in chained AngularJS promises

I'm trying to wrap my head around error handling in chained AngularJS promises. I'm aware of this success/failure syntax:

        .then( function( departure )
        {
            $scope.departure = departure;                               // Response Handler #1
            return travelService.getFlight( departure.flightID );       // Request #2
        }, function( error )
        {
          //handle error
        })

However, I don't know how to apply that to a chain like this:

var FlightDashboard = function( $scope, user, flightService, weatherService )
{
    travelService
        .getDeparture( user )                                           // Request #1
        .then( function( departure )
        {
            $scope.departure = departure;                               // Response Handler #1
            return travelService.getFlight( departure.flightID );       // Request #2
        })
        .then( function( flight )
        {
            $scope.flight = flight;                                     // Response Handler #2
            return weatherService.getForecast( $scope.departure.date ); // Request #3
        })
        .then( function( weather )
        {
            $scope.weather = weather;                                   // Response Handler #3
        });
};

What if I need an error handling function for any or all of those 3 requests. Would it then look like this? and if it does do I need to return anything from the error handlers?

var FlightDashboard = function( $scope, user, flightService, weatherService )
{
    travelService
        .getDeparture( user )                                           // Request #1
        .then( function( departure )
        {
            $scope.departure = departure;                               // Response Handler #1
            return travelService.getFlight( departure.flightID );       // Request #2
        }, function( error )
        {
          //handle request 1 error
        })
        .then( function( flight )
        {
            $scope.flight = flight;                                     // Response Handler #2
            return weatherService.getForecast( $scope.departure.date ); // Request #3
        }, function( error )
        {
          //handle request 2 error
        })
        .then( function( weather )
        {
            $scope.weather = weather;                                   // Response Handler #3
        }, function( error )
        {
          //handle request 3 error
        });
};

Upvotes: 0

Views: 270

Answers (1)

Chandermani
Chandermani

Reputation: 42669

Yes like the success function, error handling function too needs to return a value. The promise returned by the then function is resolved by the return value of success or error callback.

A quirk here is that if we do a normal return in error callback, the promises further in the chain will always get resolved to sucess. If you want to propagate the promise are rejected promise further down the promise chain, you need to return a rejected promise in error callback. Like this:

var FlightDashboard = function( $scope, user, flightService, weatherService )
{
    travelService
        .getDeparture( user )                                           // Request #1
        .then( function( departure )
        {
            $scope.departure = departure;                               // Response Handler #1
            return travelService.getFlight( departure.flightID );       // Request #2
        }, function( error )
        {
            return $q.reject(error)
        })
        .then( function( flight )
        {
            $scope.flight = flight;                                     // Response Handler #2
            return weatherService.getForecast( $scope.departure.date ); // Request #3
        }, function( error )
        {
            return $q.reject(error)
        })
        .then( function( weather )
        {
            $scope.weather = weather;                                   // Response Handler #3
        }, function( error )
        {
            return $q.reject(error)
        });
};

Upvotes: 2

Related Questions